Question

<MyContext.Consumer>
    {value => { }}
</MyContext.Consumer>

VS

let value = useContext(MyContext);

使用Context.Consumer和useContext钩子访问上下文提供者传递的值，这两个片段之间有什么区别？我认为useContext将订阅上下文提供者，因为我们将Context作为参数传递，因此当提供者值更改时，它将触发重新渲染。

Answer 1

是正确的。他们将做基本相同的事情。

我认为useContext钩子具有更好的可读性语法。

来自React Docs：

https://reactjs.org/docs/hooks-reference.html#usecontext

useContext

const value = useContext（MyContext）;   接受一个上下文对象（从React.createContext返回的值）并返回该上下文的当前上下文值。当前上下文值由树中调用组件上方最近的值prop决定。

组件上方最接近的位置更新时，此挂钩将触发重新渲染，并将最新的上下文值传递给该MyContext提供程序。

也来自React Docs：

https://reactjs.org/docs/context.html

Context.Consumer
<MyContext.Consumer>
 {value => /* render something based on the context value */}
</MyContext.Consumer>
订阅上下文更改的React组件。这样，您可以在功能组件中订阅上下文。

更新：

发件人： http://brianyang.com/react-hooks-a-deeper-dive-featuring-usecontext-and-usereducer/

用于消费上下文的新useContext钩子不会更改围绕上下文的概念，因此会出现上述情况。此上下文挂钩仅为我们提供了一种额外的，更漂亮的方式来使用上下文。将其应用于消耗多个上下文的组件时，它非常有用。

Context.Consumer与useContext（）来访问Context.Provider传递的值

1 个答案: