javascript - 使用 ContextAPI 不会重新呈现其使用者，但会更改内容。为什么？

Question

考虑这个小例子。在通过本书学习的同时，我对 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/

标签： javascriptreactjsrenderreact-context

Answer 1

孩子<MyContext.Consumer>被重新渲染。这样做可以看到：

const D3 = () => {
    console.log('render D3');
    return <MyContext.Consumer>{num => {console.log('CONSUMER'}; return num;}}</MyContext.Consumer>;
};

小提琴