前言
近年前端技术层出不穷，React 也是程序员间讨论最多的 Javascript 框架之一。借这个机会开始学习 React，并把笔记作为 React 基础教程系列（参考 React 官网）。
因为属于入门，不太适合对 React 有经验的同学，但希望到此的同学多少都有所收获。
Context 用途
我们可以为组件添加 props 属性，这样组件之间可以通过传入的属性进行数据处理。
但是，对于比较深，或者繁琐的组件中，如此处理会很繁琐。
比如，我们有这样的组件 UserInfoItem，在其内部还有一个 OtherInfoItem，他们都用到来自上级组件的 props 属性，来展示用户信息。
代码示例：
能看到这样在编写代码上会有个很不好的体验，我们都需要层层在组件 props 定义 userInfo 对象。
为了解决这样繁琐的问题，就有个 Context 来帮助我们简化操作。你可以把这个当成一个全局对象，然后为其定义好数字后，就可以直接从里面拿对应的参数了，从而不需要 props 的支持了。
用法示例
创建上下文 context 对象，并设置默认值：
引用该 context 对象，并通过其 Provider 作为组件来使用，同时可以设置 value 覆盖默认值：
这样，我们的子组件们，可以直接从 context 中那所需要的值了：
API 说明
React.createContext(value)
用来创建 Context 上下文对象，所需要使用上下文值的组件，将从离它最近的组件树 Provider 中获取数据。
Context.Provider
每个 Context 对象将返回 Provider 组件，我们可以像用组件一样使用 Foo.Provider ，该组件接受一个 value 属性用于覆盖 React.createContext 默认值。
因为 Provider 属于组件，所以当 value 属性更新时，内部"包裹"的组件将重新渲染。
Class.contextType
注意到 class 组件，可以使用 static contextType，用 context 赋值给它，我们就能在组件中使用 this.context 获取上下文的 context 对象。
Context.Consumer
类似 Provider ，对应就有 Consumer 组件，其用来消费 Provider 定义的 value，也通过 function as a child 的形式来使用：
注意，value 的入参位置也可以是多个参数，这取决于 React.createContext 中定义的参数列表。
最后
简单可以把 Context 看成一个类似 window/global 的全局变量，我们可以定义 Provider，内部组件可以直接通过 Consumer 的形式从其中拿到对应的值。
在 React JSX 的模板中有更自由的编写方式，另外，可以对每层组件定义其范围内的 Provider，根据“就近原则”来消费定义的 value 。
为了更好的阅读体验，可以在文章底下的“了解更多”中查看原文。
閱讀更多 前端雨爸 的文章
