Reactjs 和内联样式，性能？

Question

目前我正在使用 material-ui 学习 React，有一件事情让我很惊讶：

<div data-reactroot="" class="wafe" style="color: rgba(0, 0, 0, 0.870588); transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; box-sizing: border-box; font-family: Roboto, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px; border-radius: 2px; display: inline-block; min-width: 88px; background-color: rgb(255, 255, 255);"><button tabindex="0" type="button" style="border: 10px; box-sizing: border-box; display: inline-block; font-family: Roboto, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; text-decoration: none; margin: 0px; padding: 0px; outline: none; font-size: inherit; font-weight: inherit; transform: translate3d(0px, 0px, 0px); position: relative; height: 36px; line-height: 36px; width: 100%; border-radius: 2px; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; text-align: center; background-color: rgb(0, 188, 212);"><div><div style="height: 36px; border-radius: 2px; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; top: 0px;"><span style="position: relative; opacity: 1; font-size: 14px; letter-spacing: 0px; text-transform: uppercase; font-weight: 500; margin: 0px; padding-left: 16px; padding-right: 16px; color: rgb(255, 255, 255); -webkit-user-select: none;">Guzik</span></div></div></button></div>

一定要这样吗？有没有办法将这种样式移动到另一个文件/位置，或者它必须像 React+material-ui 一样？

Answer 1

Material-UI 使用内联样式来提供最可预测的行为。 mui 的组件有很多动画，它们是由 javascript 控制的。这些样式是由代码生成的。

您实际上是指哪种表现？正在加载？渲染？

1. 加载：JS，生成样式胜出，因为如果您使用正确的构建工具，您将只获得所需的代码，而样式只是其中的一小部分。

2. 渲染：内联样式获胜，因为渲染器不需要将选择器映射到样式，使得级联到所有样式，它也必须解析。

内联样式的好处是巨大的。 CSS with JS 的好处也是非常巨大的。

如果您了解一些 CSS 框架，例如 Bootstrap，您就会知道，很多时候您必须使用包装器。像容器、表单、面板等的包装器。因为如果不知道上下文，用类来设置组件的样式是很困难的，甚至是不可能的。所以框架教你创建包装器，它们只是愚蠢的 div，但你需要它们将你想要的样式应用到内部部件。这很好吗？简单吗？怎么改呢？学习呢？

使用内联样式绝对更简单。如果出现问题，您只需查看组件并在那里进行更改。

如果你使用 JS 对象来描述你的风格，你可以分享它，并命名它。命名和作用域也给你带来了很多积极的副作用，你可以创建组件并在你想要的地方使用它们，而不用担心类名，因为类名是全局的。

如果您使用两个不同的 UI 框架，它们通常会为按钮使用相同的名称，btn、button、panel .. 所有这些东西都存在于您的全局文档中。所以它更奇怪，然后为显式组件使用显式样式。

你应该看看这个演示文稿，非常好：

https://speakerdeck.com/vjeux/react-css-in-js