reactjs - 记住我所有的反应组件是个好主意吗？

我最近决定刷新 react 的文档并遇到https://reactjs.org/docs/react-api.html#reactmemo (React.memo)。

乍一看，它似乎是我几乎所有功能组件的理想选择。所以我就这样做了，并申请memo了所有这些。

我不确定我是否能够注意到性能的显着提升，但它肯定不会让任何事情变慢。

因此，问题是：我是否应该默认将备忘录应用于我的所有功能组件，以防万一我可以捕捉到重新渲染大量元素的边缘情况？这有什么缺点/我需要注意的其他事情吗？

标签： reactjs

不，您不应该默认记住所有功能组件。您应该根据具体情况决定何时执行此操作。

1. 仅适用于“纯”功能组件（如中，无副作用）

从文档中：

如果你的函数组件在给定相同的 props 的情况下呈现相同的结果，你可以将它包装在对 React.memo 的调用中，以便在某些情况下通过记忆结果来提高性能。

想象一下，您在函数组件中添加了一些副作用，例如，从Date.now(). 该组件将在第一次使用某些道具调用时按预期工作，但下次使用相同的道具调用它时，将使用旧时间。这可能会导致令人困惑的错误。

例如，如果不太可能使用相同的 props 调用组件，那么记忆结果可能会导致更差的性能。毕竟，记忆化只是将函数调用的结果存储到一个对象，其中键来自函数的输入，值是函数调用的结果。如果您永远不会使用它，为什么要存储它？

如果你的函数组件不需要很多 CPU 周期来渲染，那么任何性能优化都可能可以忽略不计。但是现在可以稍后向该组件添加副作用，忘记它正在被记忆，并浪费时间修复由此产生的错误。

同样，来自文档：

此方法仅作为性能优化存在。不要依赖它来“阻止”渲染，因为这可能会导致错误。