React Native如何使用React.备注集合中的每个组件,只呈现更改过的组件.react的奇怪行为



我一直在尝试通过使用React来提高渲染性能。关于组件的备忘录。它可以正常工作,直到我将它用于作为子组件插入的集合中的每个组件。

我在这里准备了零食

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

当你按下第一个名为的按钮时,切片MYNUMBERS你会看到React。memo的isEqual函数名为isWrapperEqual返回true,但它仍然不停止重新呈现Child组件。但是Wrapper也不是所有其他辅助包装器组件(ChildOk))被渲染!

当你点击任何时按ME:[number]按钮,它强制您重新渲染其他当只有一个组件被修改时。

值得一提的是TestCompMemo当任何按钮被按下时都不会重新渲染——这是正确的行为。

1)对此有什么解释吗?

2)是否有方法使用React。对每个组件进行备注,从集合到只呈现更改的组件(如Wrapper所示)组件)?

  1. 这有什么解释吗?

在您的零食示例中,您在应用程序的顶层有一个Context.Provider包装器。

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

  1. 是否有办法使用React。备注每个组件从收集到只呈现改变的(因为它呈现在包装器组件)?

使用反应。不建议对每个组件都做备注。你可能会遇到组件不重新渲染的bug,并且你正在增加所有比较的开销。

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

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

最新更新