React在构建高性能前端应用时有哪些最佳实践？

本文共计826个文字，预计阅读时间需要4分钟。

目录

1.介绍

2.使用

1. 介绍

CSS-in-JS 是一种技术，而不是一个完整的库实现。简单来说，CSS-in-JS 就是将应用的CSS样式直接写在JavaScript文件中，而不是使用独立的CSS、SCSS或LESS文件。

2. 使用CSS-in-JS 就是将应用的CSS样式嵌入到JavaScript文件中，这样可以在JavaScript代码中直接控制样式，提高样式的动态性和可复用性。

目录

• 1. 介绍
• 2. 使用

1. 介绍

CSS-in-JS 是一种技术，而不是一个具体的库实现。简单来说 CSS-in-JS 就是将应用的CSS样式写在 JavaScript 文件里面，而不是独立为一些 css，scss 或 less 之类的文件，这样你就可以在 CSS 中使用一些属于JS的诸如模块声明，变量定义，函数调用和条件判断等语言特性来提供灵活的可扩展的样式定义。CSS-in-JS 在 React 社区的热度是最高的，这是因为 React 本身不会管用户怎么去为组件定义样式的问题，而 Vue 有属于框架自己的一套定义样式的方案。

styled-components 应该是 CSS-in-JS 最热门的一个库，通过 styled-components，你可以使用 ES6 的标签模板字符串语法，为需要 styled 的 Component 定义一系列 CSS 属性，当该组件的 JS 代码被解析执行的时候，styled-components 会动态生成一个 CSS 选择器，并把对应的 CSS 样式通过 style 标签的形式插入到 head 标签里面。