React Context

1、作用

Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法,实现跨级父子组件间的通信。
在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但这种做法对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI 主题），这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。

2、使用 Context

（1）React.createContext(defaultValue)

const MyContext = React.createContext(defaultValue);

创建一个 Context 对象，defaultValue为设置的默认值。
当 React 渲染一个订阅了这个 Context 对象的组件，这个组件会从组件树中离自身最近的那个匹配的 Provider 中读取到当前的 context 值。

（2）Context.Provider。

<MyContext.Provider value={/* 某个值 */}>

每个 Context 对象都会返回一个 Provider React 组件，它允许消费组件订阅 context 的变化。Provider 接收一个 value 属性，传递给消费组件。一个 Provider 可以和多个消费组件有对应关系。多个 Provider 也可以嵌套使用，里层的会覆盖外层的数据。
当 Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染。Provider 及其内部消费组件都不受制于 shouldComponentUpdate 函数，因此当消费组件在其祖先组件退出更新的情况下也能更新。

（3） Class.contextType

class MyClass extends React.Component {
  componentDidMount() {
    let value = this.context;
    /* 在组件挂载完成后，使用 MyContext 组件的值来执行一些有副作用的操作 */
  }
  componentDidUpdate() {
    let value = this.context;
    /* ... */
  }
  componentWillUnmount() {
    let value = this.context;
    /* ... */
  }
  render() {
    let value = this.context;
    /* 基于 MyContext 组件的值进行渲染 */
  }
}
MyClass.contextType = MyContext;

挂载在 class 上的 contextType 属性会被重赋值为一个由 React.createContext()创建的 Context 对象。这能让你使用 this.context 来获取最近 Context 上的那个值。你可以在任何生命周期中访问到它，包括 render 函数中。

上面的概念看不懂，没关系，下面我们通过撸代码，一目了然~~~

 <script type="text/babel">
      /*1、 创建一个 context（{id:00000,name:XX,address:'China'}为默认值）。*/
      const DataContext = React.createContext({id:'00000',name:'XX',address:'China'});
      class App extends React.Component {
        constructor(props) {
          super(props);
          this.id = 1000;
          this.state = {
            obj: {
              id: this.id,
              name: "CaiKe",
              address: "上海徐汇区"
            }
          };
        }
        render() {
          setTimeout(() => {
            this.setState({
              obj: {
                id: ++this.id,
                name: "Kevin",
                address: "上海浦东新区"
              }
            });
          }, 1500);
          /* 使用一个 Provider 来将当前的 DataContext 传递给以下的组件树。
          * 无论多深，任何组件只要获取Context，都能读取这个值。
          *在这个例子中，我们将this.state.obj作为当前的值传递下去。
          */
          return (
            <DataContext.Provider value={JSON.stringify(this.state.obj)}>
              <MiddleCom />
            </DataContext.Provider>
          );
        }
      }

      // 中间的组件再也不必指明往下传递 DataContext 了。
      function MiddleCom(props) {
        return (
          <div>
            <ChildCom />
          </div>
        );
      }

      class ChildCom extends React.Component {
        // 3、指定 contextType 读取当前的 DataContext。
        // React 会往上找到最近的 Provider，然后使用它的值。
        // 在这个例子中，当前的 DataContext 值为 App 组件中的state的obj的值。
       static contextType = DataContext;
        constructor(props) {
          super(props);
          this.value = null;
        }
        componentDidMount() {
       // 4、使用 this.context 来获取最近 Context 上的那个值，及在Provider 上设置的value
          this.value = this.context;
        }
        componentDidUpdate(prevProps, prevState) {
          this.value = this.context;
        }
        render() {
          return <div>{this.value}</div>;
        }
      }
      // 也可以这样设置组件的 contextType 属性，赋值为一个由 React.createContext()创建的 Context 对象
      // ChildCom .contextType = DataContext;
      ReactDOM.render(<App />, document.getElementById("root"));
    </script>

效果图

上面代码中，创建了一个DataContext（第一步），设置默认值为{id:'00000',name:'XX',address:'China'}；使用DataContext.Provider包裹子组件（第二步），设置value为App组件的state.obj；最后指定 contextType 读取当前的DataContext（第三步），通过this.context获取到了在父组件的父组件中设置的数据。
基本大功告成。o(∩_∩)o 哈哈~~
我们在App组件中定时修改数据，作为中间组件的MiddleCom，没有做任何传递，ChildCom组件正确的显示出了数据。

（4）Context.Consumer

<MyContext.Consumer>
  {value => /* 基于 context 值进行渲染*/}
</MyContext.Consumer>

组件订阅到 context 变更，在函数式组件中完成订阅 context。
需要使用函数做为子元素。这个函数接收当前的 context 值，返回一个 React 节点。传递给函数的 value 值等同于往上组件树离这个 context 最近的 Provider 提供的 value 值。如果没有对应的 Provider，value 参数等同于传递给 createContext() 的 defaultValue。

  // 确保传递给 createContext 的默认值数据结构是调用的组件（consumers）所能匹配的！
      const DataContext = React.createContext({
        id: "1234",
        name: "张三"
      });
      function ShowText() {
        //订阅context变更
        return (
          <DataContext.Consumer>
            {({ id, name }) => (
              <div>
                <div>{id}</div>
                <div>{name}</div>
              </div>
            )}
          </DataContext.Consumer>
        );
      }
      class App extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            id: 1001,
            name: "Zhang"
          };
        }
        componentDidMount() {
          setInterval(() => {
            this.setState((state, props) => ({
              id: ++state.id,
              name: props.name + "_" + state.id
            }));
          }, 1000);
        }

        render() {
          // 整个 state 都被传递进 provider
          return (
            <DataContext.Provider value={this.state}>
              <ContentOne />
            </DataContext.Provider>
          );
        }
      }
      //中间组件1
      function ContentOne() {
        return (
          <div>
            <ContentTwo />
          </div>
        );
      }
      //中间组件2
      function ContentTwo() {
        return (
          <div>
            <ShowText />
          </div>
        );
      }
      ReactDOM.render(<App name="张三" />, document.getElementById("root"));

3、注意点

Context 主要应用场景在于很多不同层级的组件需要访问同样一些的数据。请谨慎使用，因为这会使得组件的复用性变差。

如果你只是想避免层层传递一些属性，组件组合（component composition）有时候是一个比 context 更好的解决方案。

另外一种无需 context 的解决方案是将深层次的组件自身传递下去，通过props来获取，因而中间组件无需知道这些自己不需要的props。

function Page(props) {
  const user = props.user;
  const content = <Feed user={user} />;
  const topBar = (
    <NavigationBar>
      <Link href={user.permalink}>
        <Avatar user={user} size={props.avatarSize} />
      </Link>
    </NavigationBar>
  );
  return (
    <PageLayout
      topBar={topBar}
      content={content}
    />
  );
}

这种对组件的控制反转减少了在你的应用中要传递的 props 数量，这在很多场景下会使得你的代码更加干净，使你对根组件有更多的把控。但是，这并不适用于每一个场景：这种将逻辑提升到组件树的更高层次来处理，会使得这些高层组件变得更复杂，并且会强行将低层组件适应这样的形式，这可能不会是你想要的。
这种模式足够覆盖很多场景了，在这些场景下你需要将子组件和直接关联的父组件解耦。如果子组件需要在渲染前和父组件进行一些交流，你可以进一步使用 render props。

4、总结

有的时候在组件树中很多不同层级的组件需要访问同样的一批数据。Context 能让你将这些数据向组件树下所有的组件进行“广播”，所有的组件都能访问到这些数据，也能访问到后续的数据更新。使用 context 的通用的场景包括管理当前的 locale，theme，或者一些缓存数据，这比替代方案要简单的多。
还有很多注意点和细节问题，可以去官网Context学习。