在使用Context API时,这是一个非常常见的性能问题。实际上,每当上下文中的状态值发生变化时,位于提供程序之间的整个组件都会重新渲染,从而导致性能下降。
如果我的包装器是这样的:
<CounterProvider>
<SayHello />
<ShowResult />
<IncrementCounter />
<DecrementCounter />
</CounterProvider>
并且价值主张如下:
<CounterContext.Provider value={{increment, decrement, counter, hello }} >
{children}
</CounterContext.Provider>
每次我从
IncrementCounter
组件增加计数值时,整个包装组件集合都会重新渲染,因为这是Context API的工作方式。我进行了一些研究,并找到了以下解决方案:
- 根据用例将上下文拆分为N个上下文:此解决方案按预期工作。
- 使用
React.Memo
包装值提供程序:我看到很多文章建议使用React.Memo API如下:
<CounterContext.Provider
value={useMemo(
() => ({ increment, decrement, counter, hello }),
[increment, decrement, counter, hello]
)}
>
{children}
</CounterContext.Provider>
然而,这并没有按预期工作。我仍然可以看到所有组件都被重新渲染。在使用Memo API时,我做错了什么?Dan Abramov确实建议在一个开放的React issue中采用这种方法。
如果有人能帮我解决这个问题,感谢您的阅读。