我正在尝试优化我的React应用程序以删除不必要的渲染。
请参考此Snack示例:https://snack.expo.io/bUZpyw0kH
在这个示例应用程序中,有两个存储在上下文中的状态变量。其中一个值每秒更新一次,另一个永远不会改变。
我尝试理解的是为什么每秒都会调用console.log('rerender');
。
据我所知,当您解构存储在上下文中的变量时,只有在解构的变量更改时才会收到更新。我只访问otherValue
,而不是每秒都更改的elapsed
。在这种情况下,为什么会出现console.log('rerender')
?
在这种情况下,console.log('context child render');
不是每次都被调用,因为我已经使用 React.memo
包装了这个组件。
我应该更改这个还是将ContextChild
包装在React.memo中就足够高效了?我需要拆分成多个提供者吗?如果需要拆分,组件如何访问两个上下文的变量?