react-context用法

1import React, { PureComponent } from "react";
2
3// 如果一个组件订阅了Context，那么这个组件会从离自身最近的那个前辈组件匹配的 Provider 中读取到当前的context值；
4// defaultValue是组件在查找过程中没有找到对应的Provider，那么就使用默认值
5const defaultValue = "一个默认值";
6// 创建一个context容器：
7const Store = React.createContext(defaultValue);
8// Provider生产者 : 用于包裹传值的前辈组件;
9// Consumer消费者 : 用于包裹接收值的后辈组件;
10const { Provider, Consumer } = Store;
11
12const Sun = () => (
13  <Consumer>
14    {(value) => (
15      <div>
16        我是孙组件,消费者,接收到了：
17        {value}
18      </div>
19    )}
20  </Consumer>
21);
22
23const Son = () => (
24  <Consumer>
25    {(value) => (
26      <div>
27        我是子组件,消费者,接收到了：
28        {value}
29        <Sun />
30      </div>
31    )}
32  </Consumer>
33);
34
35class Father extends PureComponent {
36  render() {
37    const name = "hello world";
38    return (
39    // Provider通过value将值传递出去
40      <Provider value={name}>
41        <div>
42          我是父组件，生产者，生产出了：
43          {name}
44          <Son />
45          {/* <Brother />  */}
46        </div>
47      </Provide