一个 React 新接口 context 的小栗子

从 v16.3.0 开始，React 开始提供官方的 context 接口；在此之前，为了管理复杂的数据、状态，我们已经有了很多套路，比如：redux、mobx，等，这次有了官方的数据管理方式，相信会有更好的体验和更多的可能性

const { Provider: P1, Consumer: C1 } = React.createContext('em, i am a p1');
const { Provider: P2, Consumer: C2 } = React.createContext('em, i am a p2');
class App extends React.Component {
  render() {
    return (
      <div>
        <P1 value={'i am a p1'}>
          <C1>{value => <li>{value}</li>}</C1>
          <C1>{value => <li>{value}</li>}</C1>
        </P1>
        <P1 value={'i am another p1'}>
          <C1>{value => <li>{value}</li>}</C1>
        </P1>
        <P2 value={'i am a p2'}>
          <C1>{value => <li>{value}</li>}</C1>
        </P2>
      </div>
    )
  }
}
ReactDOM.render(<App />, document.querySelector("#app"))

代码栗子中，我创建了 2 对 Provider 和 Consumer 对（P1 与 C1, P2 与 C2）
C1 类型的节点会沿着 tree 向上搜索至 P1 类型的节点，并获取其 value；C2 则搜索 P2
执行结果如下图所示：

对应于官网中这一段描述：