Javascript 调试React上下文重新加载程序

我正在尝试优化我的React应用程序，以删除不必要的渲染

请参考此小吃了解示例：

在这个示例应用程序中，有两个状态变量存储在上下文中。其中一个值每秒更新一次，另一个值从不更改

我想弄清楚的是为什么

console.log（'rerender'）每秒调用一次

根据我的理解，当您解构存储在上下文中的变量时，您只会在解构变量更改时收到更新。我只访问
其他值
，而不是每秒都在变化的
已用时间
。在此基础上，我为什么会看到
console.log（'rerender'）

在本例中，
console.log（'context-child-render'）并不是每次都被调用，因为我已经用
React.memo
包装了这个组件

我应该更改此设置还是在React.memo中包装
ContextChild
？我是否需要拆分为多个提供商？如果我这样做了，那么如果组件需要从两个上下文访问变量呢

根据我的理解，当您解构存储在上下文中的变量时，您只会在解构变量更改时收到更新

不幸的是，React无法判断从上下文读取的值是否正在被分解。上下文提供单个值，React只知道组件正在使用提供者提供的值。每当值更改时，提供者的使用者将重新提交

在本例中，单个值由2个状态值和一个状态设置器组成。其中一个值定期更改，导致提供程序的状态更新，然后重新加载。渲染将创建一个新对象以设置为提供程序的值（
value={{appeased，otherValue，setOtherValue}}
是一个新对象）。然后对照以前的值检查此新对象，以查看使用者是否需要更新。因为这两个值不能相同（
{}！=={}==true
），所以将对每个使用者进行更新


我应该更改此设置还是在React.memo中包装
ContextChild

这是主观的，每个应用程序都需要单独考虑

是否需要优化？
消费者只阅读
otherValue
的更新是否昂贵？如果更新很便宜，而且数量不多，就不需要优化。如果在滚动或与页面交互时，更新很明显并导致延迟，则可能需要进行优化

您应该进行哪些优化？
大多数消费者需要这两个值，还是只读取其中一个值？如果大多数组件只使用来自对象的一个值，那么将上下文拆分为两个单独的提供者以满足两个单独的用例可能是有意义的。但是，如果有一个小的数字只关心其中一个值，而不是同时需要这两个值，那么
React.memo
解决方案可能足以解决这些情况，而不必使用代码从多个上下文读取其他消费者。
尝试此库以过滤掉不需要的重新渲染

这个例子可以是您的相同情况