我一直在尝试通过使用React来提高渲染性能。关于组件的备忘录。它可以正常工作,直到我将它用于作为子组件插入的集合中的每个组件。
我在这里准备了零食
要了解发生了什么,您需要打开控制台,因为有一些日志显示。您将看到WrapperMemo通常呈现Child组件(它们也被包装在一些辅助组件中,以检查稍后我将解释的内容)。
当你按下第一个名为的按钮时,切片MYNUMBERS你会看到React。memo的isEqual函数名为isWrapperEqual返回true,但它仍然不停止重新呈现Child组件。但是Wrapper也不是所有其他辅助包装器组件(ChildOk))被渲染!
当你点击任何时按ME:[number]按钮,它强制您重新渲染其他子当只有一个组件被修改时。
值得一提的是TestCompMemo当任何按钮被按下时都不会重新渲染——这是正确的行为。
1)对此有什么解释吗?
2)是否有方法使用React。对每个组件进行备注,从集合到只呈现更改的组件(如Wrapper所示)组件)?
- 这有什么解释吗?
在您的零食示例中,您在应用程序的顶层有一个Context.Provider
包装器。
这是导致重新渲染的原因。这是预期的行为,您可以在这里阅读更多信息:https://github.com/facebook/react/issues/15156#issuecomment-474590693
- 是否有办法使用React。备注每个组件从收集到只呈现改变的(因为它呈现在包装器组件)?
使用反应。不建议对每个组件都做备注。你可能会遇到组件不重新渲染的bug,并且你正在增加所有比较的开销。
如果你想优化应用程序,你可能需要运行分析器,找出应用程序的哪些部分减慢了速度,并从那里开始工作。
但是如果你想防止不必要的重新渲染,你可以将上下文的使用提升几个级别,并将onPress
传递给子组件。