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);
暂时理清了以上思路,如有新的理解会再更新过来。