reactjs - React Native 如何在集合中的每个组件上使用 React.memo 以仅渲染更改的组件。React.memo 的奇怪行为

Question

我一直在尝试通过在组件上使用 React.memo 来提高渲染性能。它可以正常工作，直到我在作为子项插入的集合中的每个组件上使用它为止。

我在这里准备了小吃

要了解发生了什么，您需要打开控制台，因为显示了一些日志。您将看到WrapperMemo通常呈现子组件（它们也被包裹在一些辅助组件中以检查我稍后会解释的内容）。

当你按下第一个名为SLICE MYNUMBERS的按钮时，你会看到 React.memo 的 isEqual 函数isWrapperEqual返回 true，但它仍然不会停止重新渲染子组件。然而，无论是Wrapper还是所有其他辅助包装组件（ChildOk）都不会被渲染！

当您单击任何PRESS ME:[number]按钮时，它会强制您在仅修改一个子组件时重新渲染其他子组件。

值得一提的是，当按下任何按钮时，TestCompMemo永远不会重新呈现——这是正确的行为。

1）对此有什么解释吗？

2) 有没有办法在集合中的每个组件上使用 React.memo 以仅呈现更改的组件（如Wrapper组件中所示）？

Answer 1

1. 对此有什么解释吗？

在您的快餐示例中，您Context.Provider在应用程序的顶层有一个包装器。

这就是导致重新渲染的原因。这是预期的行为，您可以在此处阅读更多信息：https ://github.com/facebook/react/issues/15156#issuecomment-474590693

2. 有没有办法在集合中的每个组件上使用 React.memo 以仅呈现更改的组件（如 Wrapper 组件中所示）？

不建议在每个组件上都使用 React.memo。您可能会遇到组件不重新渲染的错误，并且您会增加所有比较的开销。

如果您想优化应用程序，您可能需要运行分析器并找出应用程序的哪些部分正在减慢速度并从那里开始工作。

但是，如果您想防止不必要的重新渲染，您可以将上下文使用提高几个级别并将其传递onPress给子组件。