[英]Using ContextAPI doesn't re-render its consumer, but content is changed. Why?
考虑这个小例子。 在通过本书学习的同时,我对 Context API 做了一些实验。
const MyContext = React.createContext(0);
const D3 = () => {
console.log('render D3');
return <MyContext.Consumer>{num => `${num}`}</MyContext.Consumer>;
};
const D2 = React.memo(() => {
console.log('render D2');
return <D3 />;
});
const D1 = React.memo(() => {
console.log('render D1');
return <D2 />;
});
const App = () => {
const [num, setNum] = useState(0);
console.log('render App');
return (
<div>
<MyContext.Provider value={num}>
<D1 />
</MyContext.Provider>
<input type='button' onClick={() => { setNum(Math.random()) }} />
</div>);
};
ReactDOM.render(<App />, document.querySelector('#root'));
当我点击按钮时,我可以看到我的小号正在改变。 另请注意,每次点击都会呈现App
,而D1
和D2
则不会。 我明白了这其中的原因。
但奇怪的是,当按钮被点击时, D3
并没有被重新渲染。 它的内容还在变化吗? 究竟发生了什么?
请为您的方便检查: https://jsfiddle.net/gfnuko/cs7jpo69/4/
子<MyContext.Consumer>
被重新渲染。 这样做可以看到:
const D3 = () => {
console.log('render D3');
return <MyContext.Consumer>{num => {console.log('CONSUMER'}; return num;}}</MyContext.Consumer>;
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.