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

Question

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

乍一看，它似乎是我几乎所有功能组件的不错选择。所以我就是这样做的，并应用于memo所有这些。

我不确定我是否能够注意到显着的性能提升，但它肯定不会减慢任何速度。

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

Answer 1

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

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

从文档：

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

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

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

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

再次，来自文档：

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