【React】context的提供与使用

context 上下文变量的使用这几天困扰了我一下。

故此写篇文章整理一下。

1、提供者（Provider）

表示向下传递数据，在整颗树上的后代节点都能使用。

以下<Context.Provider/Consumer >的Context均可以随便取名字
比如const TianTianContext = React.createContext(null);
<TianTianContext.Provider >
<TianTianContext.Consumer >

（1）Context.Provider传输上下文公用数据

前年使用React的时候，还是使用.Provider的形式，传输上下文公用数据

<Context.Provider value={you value json}>
   <Direcotry />
</Context.Provider>

（2）新增getChildContext()向子级传递数据

现在新增了一个getChildContext()方法

必须同时定义childContextTypes 和getChildContext()的返回值即可让Button组件自动继承上下文数据

class Directory extends React.Component{
  static childContextTypes = {
    list: PropTypes.instanceOf(Immutable.List).isRequired,
    cellData: PropTypes.any,
    data: PropTypes.instanceOf(Array),
  };
  getChildContext() {
    return {
      list: this.context.list,
      cellData: this.state.cellData,
      data: this.context.data,
    };
  }
  render(){
   return  <Button />
  }
}

说明：
方式（1）适合函数式组件和类组件，方式（2）适合类组件

2、消费者

（1）Context.Consumer接收祖辈Provider的value值

同Provider一样，是个老方式

<Context.Consumer>
 {value => (ReactNode) }
<Context.Consumer>

value就是最近的Porvider节点的value值，返回React Node数据，上面没有父Porvider那就是CreateContext(defaultValue)的defaultValue。

(2) contextType(类)和contextTypes(函数)

现在v17.0.2版本在用的时候已经提供了更多选择。比如：contextType
contextType只能适用于类组件内部

class Directory extends React.Component {
 static contextType = {
     data: // 类型
 }
}

// 或者在外部定义
Directory.contextType = {
     data: // 类型
}

为类定义contextType就意味着Directory组件需要使用（消费上级提供的）data数据。

函数组件定义一个contextTypes则可以使用入参context获取到祖辈的Provider的value值

import PropTypes from 'prop-types';

const Button = ({children}, context) =>
  <button style={{background: context.color}}>
    {children}
  </button>;

Button.contextTypes = {color: PropTypes.string};

// 或者将Context书写在公共文件上，使用的时候引用过来
const { data } =  useContext(TianTianContext);

暂时理清了以上思路，如有新的理解会再更新过来。