React 16版本 新的context api

用法
首先创建一个xxxContext.js 的文件，这是我的命名习惯，文件名叫什么都无所谓
这个xxxContext.js里面就三行代码

import React, { PureComponent } from 'react';

const xxxContext = React.createContext({});
export default xxxContext;

然后在要提供数据的根节点上,先导入进来

import CaseContext from './CaseContext';

再在这个render的最外层套一层

render(){
const state={
  ...this.state, //可以把state中的数据传过去
  xxxFunc:()=>{},  //可以传函数
  ...以及你要传递的其他数据
}
  return <xxxContext.Provider value={state}>
             <你的根节点 />
         </xxxContext.Provider>
}

这里Provider 上面，只能是value属性，不能叫其他的，这个state随便你，可以是其他名字或者其他类型的值都可以

然后比如你的孙子组件是另一个文件叫Child.js
那么也要import 那个Context文件进来，import CaseContext from './CaseContext';
然后在你的孙子组件上
比如你原本声明了一个Child组件，然后export default Child；

现在要改一下
改成

export default props => (
  <xxxContext.Consumer>
    {values => <Child values={values} {...props} />}
  </xxxContext.Consumer>
);

相当于包一层你的Child组件，把接收到的values当做Child的props传进去，这样子，这个传递的value发生变化，就能引发孙子组件的更新,不用在Child的render里面改。这里是Consumer，代表接收的孙子。

另外补充一点，如果要传递ref的话
孙子文件那里应该改成

export default forwardRef((props,ref)=>(
  <xxxContext.Consumer>
    {values => <Child values={values} {...props} ref={ref}/>}
  </xxxContext.Consumer>
))

第一行要先把forwardRef导入进来

import React, { PureComponent, forwardRef } from 'react';