withStyles 的 Material UI 潜在的缓慢性能答案

【问题标题】：Material UI Potential Slow Performance of withStyleswithStyles 的 Material UI 潜在的缓慢性能
【发布时间】：2019-07-29 16:19:15
【问题描述】：

我的任务是让我们的 react redux web 应用程序中的页面加载得更快。

当加载页面的动作触发时，我们会看到大约 0.5 秒的小冻结。

我打开了分析器，乍一看似乎没有任何问题。
Flame Graph

没有不必要的重新渲染，唯一显示的黄色警告大约是 10 毫秒。

当我转到分析器中的排名选项卡时，我得到一个稍微不同的故事，我发现大部分时间都花在 withStyles() 上。
Ranked Graph

我们通过 withStyles() 在 JS 中使用 CSS 的 material-ui 方法，似乎使用 WithStyles() 显着影响加载速度。
是这样吗？或者这仅仅是“我一次渲染太多东西”的一个例子

将 JS 中的 CSS 转换为纯 CSS 将是一项巨大的努力，尽管我确实花了一个小时将 JS 中的 CSS 剥离出来，发现性能提高了大约 40%，尽管我不知道其中有多少40% 是由于 withStyles 而不是页面上样式元素的性能。

【问题讨论】：

【解决方案1】：

在 WithStyles 中花费的 +90% 的时间实际上是在 JSS 中花费的，在 Material-UI 方面我们几乎无能为力。

虽然，有一个可能的加速不包括重写你的 JS CSS 样式方法，它是切换到 makeStyles 而不是 withStyles

可以查到here

【讨论】：