- Provider.value 发生变化时，将导致子组件中所有 Consumner 重新渲染。
例如：
const TextContext = React.createContext()
const Parent = () => (
// value 每次都接受一个新的对象
<TestContext.Provider value={{ name: "test" }}>
<Child />
</TestContext.Provider>
)
const Child = () => (
<TestContext.Consumer>{({ name }) => <p>{name}</p>}</TestContext.Consumer>
)
在这个例子中，Parent 组件中 TestContext.Provider.value 每次都接受一个新的对象，在 diff 过程中判定为 update， 这将导致 Child 组件中 TestContext.Consumer 重新渲染。
- 解决办法：
const Parent = () => {
const valueRef = useRef({ name: "test" })
return (
<TestContext.Provider value={ref.current}>
<Child />
</TestContext.Provider>
)
}
关于这里为什么可以使用 ref，可以参考：