译文（深入了解React|译文：深入了解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组件。
文章图片
我们使用ES6的解构来提取从Provider中获取到的值中的state
对于UserDetails组件，既有state又有actions，需要加入两个输入框，并且监听它们的onChange事件，从而去触发相应的反应函数。
文章图片
使用默认值
初始化context的时候我们可以传递一些默认值。所以我们可以在context中传递一些数据（默认值）而不是一个空对象。
文章图片
要在组件树种使用这些数据，我们必须从树中删除Provider。所以我们的APP组件应该是这样的：
文章图片
文章图片
初始化新的context时，这些数据将被用于consumer（消费者）组件中。
总结
【译文（深入了解React|译文：深入了解React Context）】当事情变得越来越复杂，你尝试着yarn install第三方的状态管理库的时候，请暂停几秒，你可以利用React context。不相信我？也许你会相信Kent C. Dodds.
推荐阅读
- 深入理解Go之generate
- 我们重新了解付费。
- 拍照一年啦，如果你想了解我，那就请先看看这篇文章
- C语言中的时间函数clock()和time()你都了解吗
- 【1057快报】深入机关，走下田间，交通普法，共创文明
- 操作系统|[译]从内部了解现代浏览器(1)
- 生发知识，带你深入了解
- 深入理解|深入理解 Android 9.0 Crash 机制（二）
- 了解自然大气粒子对气候的影响
- 深入浅出谈一下有关分布式消息技术（Kafka）