Reactjs 和内联样式，性能？
Reactjs and inline styling, performance?
目前我正在使用 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>
一定要这样吗？有什么方法可以将此样式移动到另一个 file/location 中，或者它必须像这样使用 React+material-ui?
Material-UI 使用内联样式来提供最可预测的行为。
mui 的组件有很多动画，它们由 javascript 控制。此样式由代码生成。
您实际指的是哪种性能？加载中？渲染？
加载：JS，生成的样式胜出，因为如果你使用合适的构建工具，你只会得到需要的代码，而样式只是其中的一小部分。
Rendering: Inline Styles 胜出，因为renderer不需要将selectors映射到styles，层叠到所有的styles，它也需要解析。
内联样式的好处是巨大的。 CSS用JS的好处也是非常巨大的
如果你知道一些 CSS 框架，比如 Bootstrap，你就会知道，很多时候你必须使用包装器。就像容器、表单、面板等的包装器。因为如果不知道上下文，很难甚至不可能使用 classes 来设置组件的样式。所以框架教你创建包装器，它们只是愚蠢的 div，但你需要它们将你想要的样式应用到内部部分。这很好吗？简单吗？改变它怎么样？学习呢？
使用内联样式绝对更简单。如果出现问题，您只需查看组件并在那里进行更改。
如果你使用JS对象来描述你的样式，你可以分享它，并命名它。命名和范围界定也给你带来了很多积极的副作用，你可以创建组件并在你想要的地方使用它们，而不用担心 class 名称，因为 class 名称是全局的。
如果您使用两个不同的 UI 框架，它们通常对按钮使用相同的名称，btn、button、panel ..在你的全局文档中..所以它更奇怪，然后为显式组件使用显式样式。
你应该看看这个演示文稿，它非常好：
目前我正在使用 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>
一定要这样吗？有什么方法可以将此样式移动到另一个 file/location 中，或者它必须像这样使用 React+material-ui?
Material-UI 使用内联样式来提供最可预测的行为。 mui 的组件有很多动画，它们由 javascript 控制。此样式由代码生成。
您实际指的是哪种性能？加载中？渲染？
加载：JS，生成的样式胜出，因为如果你使用合适的构建工具，你只会得到需要的代码，而样式只是其中的一小部分。
Rendering: Inline Styles 胜出，因为renderer不需要将selectors映射到styles，层叠到所有的styles，它也需要解析。
内联样式的好处是巨大的。 CSS用JS的好处也是非常巨大的
如果你知道一些 CSS 框架，比如 Bootstrap，你就会知道，很多时候你必须使用包装器。就像容器、表单、面板等的包装器。因为如果不知道上下文，很难甚至不可能使用 classes 来设置组件的样式。所以框架教你创建包装器，它们只是愚蠢的 div，但你需要它们将你想要的样式应用到内部部分。这很好吗？简单吗？改变它怎么样？学习呢？
使用内联样式绝对更简单。如果出现问题，您只需查看组件并在那里进行更改。
如果你使用JS对象来描述你的样式，你可以分享它，并命名它。命名和范围界定也给你带来了很多积极的副作用，你可以创建组件并在你想要的地方使用它们，而不用担心 class 名称，因为 class 名称是全局的。
如果您使用两个不同的 UI 框架，它们通常对按钮使用相同的名称，btn、button、panel ..在你的全局文档中..所以它更奇怪，然后为显式组件使用显式样式。
你应该看看这个演示文稿，它非常好：