reactjs - Context.Consumer 与 useContext() 访问 Context.Provider 传递的值

Question

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

VS

let value = useContext(MyContext);

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

Answer 1

这是正确的。他们基本上会做同样的事情。

在我看来，useContext Hook 具有更好、更易读的语法。

来自 React 文档:

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

useContext

const value = useContext(MyContext);Accepts a context object (the value returned from React.createContext) and returns the current context value for that context. The current context value is determined by the value prop of the nearest <MyContext.Provider> above the calling component in the tree.

When the nearest <MyContext.Provider> above the component updates, this Hook will trigger a rerender with the latest context value passed to that MyContext provider.

同样来自 React 文档:

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

Context.Consumer

<MyContext.Consumer>
 {value => /* render something based on the context value */}
</MyContext.Consumer>

A React component that subscribes to context changes. This lets you subscribe to a context within a function component.

更新:

来自: http://brianyang.com/react-hooks-a-deeper-dive-featuring-usecontext-and-usereducer/

来自: https://testdriven.io/blog/react-hooks-advanced/

The new useContext hook to consume context does not change the concepts surrounding context, hence the plunge above. This context hook only gives us an extra, much prettier, way to consume context. It's amazingly helpful when applying it to components consuming multiple contexts.