Reactjs和内联样式，性能？

Question

这是我在这里的第一篇文章;）我是全新的编程世界，所以请理解。

目前我正在学习用材料界面发生反应，有一两件事我想知道：

<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一样？

问候！ Michal

Answer 1

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

你究竟意味着哪种表现？数据加载中？渲染？

1. 加载：JS，产生的风格取胜，因为如果你使用的是正确的构建工具，你将只能得到所需要的代码和样式将是其中的一小部分而已。

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

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

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

内联样式显然更简单。如果出现问题，您只需查看组件并在那里更改即可。

如果您使用JS对象来描述样式，则可以共享它并命名它。命名和范围设定为您带来了许多积极的副作用，您可以创建组件并在需要的地方使用它们，而无需担心类名称，因为类名称是全局的。

如果使用两种不同的UI框架，他们经常使用的按钮，btn，button，panel相同的名称..和所有的东西你的生活全球文档中。所以它更离奇，然后用显式风格显式组件。

你应该看看这个演示，这是非常好的：

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