material-ui Low mount/unmount performance of MUI components

368yc8dk 于 6个月前发布在其他

关注(0)|答案(4)|浏览(50)

重现步骤 🕹

链接到实时示例：https://codesandbox.io/s/hopeful-breeze-x1zsx4?file=/src/App.js
表单中使用的MUI组件并不重要，因为随着添加越来越多的组件，性能会逐渐降低。
当我移除这些组件时，性能开始改善。
步骤：

快速多次点击添加按钮以克隆表单。
在添加了几个表单后，你会发现延迟非常明显。
尝试移除表单时也是如此。

当前行为 😯

挂载/卸载速度非常慢。

预期行为 🤔

操作应该流畅。

上下文 🔦

我们最近将表单克隆功能从react-bootstrap迁移过来，并开始注意到延迟问题。
在react-bootstrap上，使用大致相同的组件相当于在使用表单时获得更快的体验。
这是代码沙箱的链接：https://codesandbox.io/s/vigilant-andras-djrwus?file=/src/App.js

你的环境 🌎

npx @mui/envinfo

System:
    OS: Linux 3.10
  Binaries:
    Node: 16.18.1
    Yarn: 1.22.11
    npm: 7.23.0
  Browsers:
    Chrome: 108.0.5359.125
    Firefox: 102.6.0esr
  npmPackages:
    @emotion/react: ^11.9.3 => 11.10.4 
    @emotion/styled: ^11.9.3 => 11.10.4 
    @mui/base: 5.0.0-alpha.84 => 5.0.0-alpha.84 
    @mui/icons-material: ^5.8.4 => 5.10.6 
    @mui/lab: 5.0.0-alpha.87 => 5.0.0-alpha.87 
    @mui/material: ^5.8.5 => 5.10.8 
    @types/react: ^17.0.6 => 17.0.50 
    react: ^17.0.0 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2

请注意，上述包详细信息来自我的本地设置。代码沙箱使用了最新的所有内容，但仍然存在这个问题。

material-ui

来源：https://github.com/mui/material-ui/issues/35716

4条答案

按热度按时间

gzszwxb41#

@michaldudak ,这个问题并不是特别关于FormControl,我之所以称之为表单克隆是因为我们的内部术语。但它实际上是一个通用的性能问题，随着一次同时挂载的MUI组件数量的增加而增加。

赞(0）回复(0）举报 6个月前

pu82cl6c2#

请注意，Material UI组件相对于react-bootstrap更加丰富，提供了更多的功能。然而，它确实有一定的成本。
React-bootstrap组件每次添加新组件时也会重新渲染，但与我们的渲染树相比要浅得多：
React-Bootstrap:

Material UI:

您可以通过对组件进行memoization来减少这个问题的影响，这样只有新添加的组件才会被渲染： https://codesandbox.io/s/currying-frost-0rt7bm?file=/src/App.js
或者(或者说),您可以查看我们的无样式组件： https://mui.com/base/getting-started/overview/ 。它们可以提供更好的性能，但您需要自己提供样式。

赞(0）回复(0）举报 6个月前

qnzebej03#

感谢@michaldudak的帮助。
这种记忆化的实现在某种程度上确实有所帮助。
目前我们无法使用无样式，所以我猜我们只能忍受这个了。

赞(0）回复(0）举报 6个月前

rm5edbpk4#

@michaldudak,这是真的，但这也意味着这个库只能用于简单的轻量级应用程序，我恐怕不得不反对将丰富的组件意味着牺牲性能。除了记住和处理即将出现的性能问题所带来的复杂性之外，让它难以采用。
我注意到最近有很多与性能问题相关的票据，
所以它应该是最近引入的一些东西！

赞(0）回复(0）举报 6个月前