译文：深入了解React Context

（原文链接：https://css-tricks.com/digging-into-react-context/）...其实并不深入，但不失为一篇好文章。

最近你可能想知道关于context的一些消息，想知道它对于你和你的react项目可能意味着什么？context出现之前，在状态管理变得异常的复杂，超出了setState的能力的时候，你可能不得不使用第三方库。感谢优秀的React团队最近作出的更新，现在React本身的context可以帮助我们解决一些状态管理方面的问题了。

context解决了什么事情？

你怎样将state传递给一个在嵌套的组件树中的一个子组件，可能你知道你可以用Redux去管理状态，但你没必要在任何情况下都去使用Redux。有一个可以不用Redux也不用第三方库的方法，你可以使用props。

加入你要实现的功能具有类似于下面的这种结构：

这些状态在APP组件中，并且在UserProfile和UserDetails组件中也是需要的，你需要利用props将它传递到树的底层，如果需要这个state的组件在树的第十层，那这样的工作会让人感到乏味、疲惫，并且也非常容易出错。每一个组件都应该像一个黑盒子，其他组件不应该知道它们不需要的状态。这是一个和上述情况相匹配的一个程序实例。（译者述：很抱歉这里用截图的形式展示代码，由于代码插入的功能不能支持JS自定义的组件，故采用截图的形式展现。如若想本地尝试，可点击原文，获取可复制的源码）

我们使用了props来将state传递给另一个组件，User 组件不需要这个state，但是为了将state传递到组件树的底层，它也通过props收到了这个state。

Context来帮忙了

通过React的Context API，你可以将state存储在应用程序的全局状态中，并仅在需要的组件中访问它，而不需要利用props一层层地往组件树底层传递。

首先，我们可以利用React.createContext()来初始化一个新的Context。

这个新的Context由const来声明，即图中的UserContext，你可以看到，我们无需安装任何的第三方的库，React V16.3.0及以上版本已经有Context API了。Provider组件使得需要context内容的组件（订阅者）能够获取它，换句话说，Provider组件允许消费者订阅context中的更改。请记住，context就类似于全局应用程序状态。因此，不是消费者的组件不会获取到context内容。

如果你在本地尝试，那你的context 文件应该类似于下图：

Provider

我们将在我们的父组件中使用Provider，在该组件中我们有state需要传递

Provider 接受一个value作为props来传递给底层的消费者组件，在本文的示例中，我们将user这个状态传递给消费者组件。你可以看到，我们并没有将它作为props传递给User组件。这也意味着我们可以在不需要props的情况下编辑User组件，因为它本身也不需要它们。

消费者（Consumer）

多个消费者组件可以订阅一个Provider组件，我们的UserProfile需要利用context，所以我们让它来订阅、观察Provider。

我们通过value props的方式注入到Provider中的数据将在函数的context参数中能获取到，现在我们可以使用这种方法在我们的组件中获取到用户的姓名。

UserDetail组件现在看起来很像UserProfile，因为它们订阅的是同一个Provider。

更新state

如果我们允许用户更改他们的姓名怎么办，这也是可行的。当通过Provider组件传递过来的值改变的时候，consumer（消费者）组件会重新渲染。在消费者组件组件中，我们将有两个输入框，分别用于名字与姓氏。在Provider组件中，我们有两个函数，接收从输入框中输入的值，用于更新应用程序的状态。

APP组件源码见下图：

我们将含有state和action的对象传递给Provider接受的value props的Provider。这些actions就是当onChange事件发生的时触发的触发的函数，事件发生得到的值可以用来更新state，因为我们想要更新的是名字和姓氏，而不需要其他值，基于此，我们利用ES6的扩展操作符，它允许我们更新指定的值。

有了这些变化，我们也需要更新UserProfile组件。