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

Posted 2023-04-14

【中文标题】使用 ContextAPI 不会重新呈现其使用者，但会更改内容。为啥？

【英文标题】：Using ContextAPI doesn't re-render its consumer, but content is changed. Why?使用 ContextAPI 不会重新呈现其使用者，但会更改内容。为什么？

【发布时间】：2021-05-12 18:54:51

【问题描述】：

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

【参考方案1】：

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

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

Fiddle

【讨论】：

那么我是否应该认为 内部的函数可以假设为另一个函数组件？

@Phryxia 否。<MyContext.Consumer> 内部的函数是提供者/消费者模式的一部分，它本身不是组件。注意这个函数如何接受来自提供者的值，而不是像函数组件那样的对象。