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