材质UI中的SX道具和makeStyles功能之间是否有性能差异？

我刚刚开始使用Material UI，我知道它以JS的方式使用CSS来设计组件的样式。
我在文档中看到了两种创建样式的方法：

使用sx道具：

<Box sx={{ backgroundColor: 'green' }}/>

使用makeStyles方法：

makeStyles({
  root: {
    backgroundColor: 'green'
  }
})

我知道JS中的CSS性能远不如原生CSS。
但是在我刚才写的这两个方法中，哪个(如果有的话)性能更好呢？

顺便说一下，我用的是Material UI版本5，它声称在情感方面比JSS有更好的整体性能

---

解决方案

对于静电样式(即不是基于道具的动态样式)，jss略快于情绪。在动态风格上，jss比情感慢得多--情感在静电和动态风格上的表现差不多。

您可以通过以下问题了解静电风格在主播和情感上的表现差异：

• https://github.com/mui-org/material-ui/issues/22342#issuecomment-696553225
• https://github.com/mui-org/material-ui/pull/22173#issuecomment-673486269

在静电风格上，JSS比情感快约10%。对于动态样式，JSS was 6 times slower than EmotionMaterial-UI团队在一次测试中执行了，这就是为什么JSS被从v5的可能样式引擎列表中删除的原因。

https://next.material-ui.com/system/basics/#the-sx-prop中的文档包含以下性能信息：

基准大小写	代码段	标准化时间
a.渲染1,000个图元	<div className="…">	100ms
b.渲染1,000个组件	<Div>	120ms
c.呈现1,000个样式组件	<StyledDiv>	160毫秒
d.渲染1,000个方框	<Box sx={…}>	370ms

我希望直接使用情感的性能(使用styled approach或css prop)类似于基准测试案例c。我预计静电样式的makeStyles会比这个稍快一些(在140ms到150ms的范围内)，但不会快太多。您可以看到sx道具明显较慢，但请记住，额外的200ms开销是针对1000个元素的，因此每个呈现的组件的额外开销仍然只有五分之一毫秒。

我不记得我看到过任何按Material-UI宣称v5总体上比v4快的说法。V5确实添加了许多新特性，如果使用JSS实现，这些特性会非常慢(由于利用动态样式)，因此他们能够添加这些特性，同时保持与V4相当的样式性能。

将makeStyles与Material-UIv5一起使用的最大缺点是，您将导致您的用户下载JSS和Emotion作为捆绑包的一部分。如果您有一个用v4构建的现有应用程序已经使用了makeStyles很多(您现在正在迁移到v5)，那么您很难避免这个额外的捆绑包大小，但是如果您还没有大量使用makeStyles，如果您担心sx的性能开销，我建议您直接使用情感而不是makeStyles。即使您确实大量使用makeStyles，我也建议您避免添加更多，以便逐步迁移到不需要@material-ui/styles包。

在我工作的应用程序中，我们有500多个makeStyles用法，所以我打算使用的迁移方法将重点放在替换我们应用程序的主要入口点(例如登录和登录后最常见的初始页面)中的makeStyles用法，并使用代码拆分来避免在到达仍在使用它的页面之前拉入@material-ui/styles包。然后，我们将逐渐从使用率最高的页面上的makeStyles迁移出去，然后削减其他页面，这样我们就有希望在V6问世之前将它们全部删除。

虽然仍然需要更改代码，但对于那些使用大量makeStyles的用户，有一个迁移选项是tss-react，它保留了与makeStyles相似的语法，但有情感支持，而不是JSS。