React：组件间数据流动（下）

        上篇文章中，讲述了 React 数据流方案中风格相对“朴素”的 Props 单向数据流方案，以及通用性较强的“发布-订阅”模式。本篇文章中将认识 React 天然具备的全局通信方式“Context API”，并对 Redux 的设计思想和编码形态进行初步的探索。

使用 Context API 维护全局状态
  Context API 是 React 官方提供的一种组件树全局通信的方式。在 React 16.3 之前，Context API 由于存在种种局限性，并不被 React 官方提倡使用，开发者更多的是把它作为一个概念来探讨。而从 v16.3.0 开始，React 对 Context API 进行了改进，新的 Context API 具备更强的可用性。首先针对 React 16 下 Context API 的形态进行介绍。

图解 Context API 工作流
  Context API 有 3 个关键的要素：React.createContext、Provider、Consumer。

  通过调用 React.createContext，可以创建出一组 Provider。Provider作为数据的提供方，可以将数据下发给自身组件树中任意层级的 Consumer，这三者之间的关系用一张图来表示：

 

注意：Cosumer 不仅能够读取到 Provider 下发的数据，还能读取到这些数据后续的更新。这意味着数据在生产者和消费者之间能够及时同步，这对 Context 这种模式来说至关重要。

从编码的角度认识“三要素”

• React.createContext，作用是创建一个 context对象。下面是一个简单的用法示范：

注意，在创建的过程中，我们可以选择性地传入一个 defaultValue：