请问下老师Consumer和useContext场景

Question

老师我想请问下关于Context这个hook。

我查阅了文档，发现文档中提供了contextType和useContext在class和fc中的解决方案。

我想请问下老师，现在FC中出现了useContext这个hook，那么还使用Consumer的意义何在？

我看老师代码中也没有使用Consumer包裹元素了，而是直接使用了useContext这个hook。

起初我以为只有在Consumer包裹下的元素，当context提供的值发生了变化，对应子组件才会根据新的值重新渲染。但是我自己测试了下，在useContext不使用Consumer包裹，提供的值改变，仍然是会重新渲染。

那这样的话，Consumer和useContext岂不是重复的API，Consumer有什么存在的意义吗。还是我理解比较片面他有别的特殊用途。请老师指教。

比如说分别在什么场景下使用Consumer，我认为使用useContext完全可以代替Consumer…

Answer 1

张轩 2021-08-22 09:57:04

同学你好 useContext 是针对 React hooks 的解决方案，从命名可以看出他是个 hooks 函数，所以他只针对 hooks 这种解决方案，可以看文档：https://zh-hans.reactjs.org/docs/hooks-reference.html#usecontext 全篇没有出现 consumer 这个名词。

而 Consumer 是另外一个层次的解决方案，他可以通过特定组件的方式来获得插入的值，

<MyContext.Consumer>
  {value => /* 基于 context 值进行渲染*/}
 </MyContext.Consumer>

所以我认为这是两个维度的方案，两条不同的思路。一个是通过函数，一个是通过组件，各有千秋。当然 useContext 更方便，更好用，所以使用第一种当然可以完全替代第二种。