- 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,可以参考: