Lyrics

< More and better />

react context状态提升共享

雨夹雪，bug 估计又要出来了

上次的博客中是关于组件之间的信息传递。但是有一个缺点：就是你所要共享的信息，需要一层一层的传递给最近的父组件
然后一层一层props 的传递给子组件，这样如果项目比较大的话，就比较难以管理。所以下来先介绍一个小知识 context

context

  1. 谨慎使用

  2. 某个组件在自己的context 设置了context ，这个组件之下的子组件 (父组件不可以) 都可以访问这个状态，不需要中间组件的传递。

父组件设置context demo

getChildContext 这个方法就是设置 context 的过程，它返回的对象就是 context，所有的子组件都可以访问到这个对象。

childContextTypes，它的作用其实 propsType 验证组件 props 参数的作用类似。不过它是验证 getChildContext 返回的对象。

如果你要给组件设置 context，那么 childContextTypes 是必写的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
static ChildContextTypes = {
	color: PropTypes.string
}
constructor(){
	super();
	this.state = {
		color:'red'
	}
}
getChildContext () {
	return {color:this.state.color}
	//返回的是一个对象
}

子组件获取context

子组件要获取 context 里面的内容的话，就必须写 contextTypes 来声明和验证你需要获取的状态的类型，它也是必写的，如果你不写就无法获取 context 里面的状态

1
2
3
4
5
6
7
8
9
static contextTypes = {
	color:PropTypes.string
}
render(){
	<div>
		{this.context.color}
	</div>
}

参考资料

context

Fighting ～～END