是什么使React.memo对于防止渲染不可靠？

Question

在documentation for React.memo中，它表示：

  

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

我不太了解这个警告。为什么不能依靠它？如果不一定阻止渲染，如何进行优化？

我希望他们在这里做得更深入，但是既然没有，那么有人可以详细说明吗？照原样，我根本不愿意使用它，因为此警告使它的行为看起来非常不清楚。

Answer 1

  

如果Parent组件正在传递函数（具体来说，   将父状态更新为子级的功能   组件，仅使用React.memo无效。中的功能   父组件将需要使用useCallback挂钩进行包装。   这是因为该功能将在每次   家长会重新渲染，因此孩子将始终认为该功能   新道具。

详细了解此here

这是我发现的关于React.memo

的另一个有趣的讨论

React.memo也适用于功能组件，React.PureComponent也适用于类组件。

PureComponent默认处理shouldComponentUpdate方法（浅比较）。

shouldComponentUpdate基本上告诉反应是否需要对帐。如果它是true，则react使用其扩散算法比较newly returned element with the previously rendered one，并基于比较将更新DOM。在某些情况下，可能会协调该组件，但渲染的反应元素相同，因此没有发生DOM更改。

要清楚地了解上面的内容，请查看此diagram

我认为，根据以上所述，我们可以说React.memo也可以告诉我们是否应为组件运行render周期。实际DOM的变化取决于执行更新DOM的差异算法。

Answer 2

也许，我们应该考虑官方文档中关于类似useMemo function的引用：

  

您可以依靠useMemo作为性能优化，而不是语义保证。

     

将来，React可能会选择“忘记”以前记住的一些内容   值并在下一次渲染时重新计算它们，例如为...释放内存   屏幕外组件。编写您的代码，使其仍然可以在没有   useMemo —然后添加它以优化性能。

我相信，React.memo和useCallback钩子也可能有同样的情况，因此您不能100％依赖React不会“忘记”一些记忆的道具来释放一些内存。