Reactjs Consumer vs useContext（）访问Context.Provider传递的值 {value=>{} VS let value=useContext（MyContext）；

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

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

在我看来，

useContext

hook具有更好的可读性语法

来自React文档：

useContext

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

当组件上方最近的链接更新时，此钩子将触发重新加载程序，并将最新的上下文值传递给该MyContext提供程序。

同样来自React文档：

上下文。消费者

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

VS

let value = useContext(MyContext);

{value=>/*根据上下文值*/}呈现某些内容

订阅上下文更改的React组件。这允许您订阅函数组件中的上下文

更新：

发件人：

新的

useContext

hook来使用上下文不会改变上下文周围的概念，因此上面的插入。这个上下文挂钩只为我们提供了一种额外的、更漂亮的方式来使用上下文。当将它应用于使用多个上下文的组件时，它会非常有用

---

谢谢那么，如果两者都订阅上下文，那么基本的区别是什么？这篇文章可能会有所帮助：我将把它添加到答案中。需要记住的一件事是，当上下文中的任何项目发生更改时，useContext都会导致重新加载，而不管它的结构是什么。使用context.consumer，您可以将值中的选定属性传递到组件中，并且仅当这些选定项发生更改时才会重新运行。@Bastiat不是第一个用于类组件，第二个用于功能组件？@vikramvi是和否，您需要将Context.consumer与类组件一起使用，因为您不能在类组件内使用钩子。但是，使用者只是将值传递给函数，如上面的示例所示，但是使用者组件不知道或不关心从该函数返回的内容。它可以返回类或函数组件。最后，它只是传递价值观。正如前面提到的，钩子对我来说更干净，特别是当你有多个提供者的时候。第一个不是用于类组件，第二个不是用于功能组件吗？

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