react 组件通信之上下文context

上下文context有两个角色
1.Provider 数据提供
2.Consumer 数据读取
使用context 可以避免通过中间元素传递props，context的设计目的是为了共享对于一个组件而言是全局的数据

• 不使用context的情况下的代码：

import React,{Component} from 'react'
// 创建一个传递的数据源
let store = {
	name:'lly',
	age:1
}

class Info extends Component{
	render(){
		return (
			<div>
				<p>姓名：{this.props.name}</p>
				<p>年龄：{this.props.age}</p>
			</div>
		)
	}
}

function ToolBar(props){
	return (
			<div>
				<Info {...pprops}></Info>
			</div>
		)
}

export default class Com extends Component{
	render(){
		return (
			<ToolBar name={store.name} age={store.age}></ToolBar>
		)
	}
}

• 使用context,避免了中间props元素的传递的写法

import React,{Component} from 'react'
// 1.创建上下文
const myContext = React.createContext()
const {Provider,Consumer } = myContext
// 创建一个传递的数据源
let store = {
	name:'lly',
	age:1
}
class Info extends Component{
	render(){
		return (
			<Consumer>
				{
					store => {
						return (
							<p>姓名：{this.props.name}</p>
							<p>年龄：{this.props.age}</p>
						)
					}
				}
			</Consumer>
		)
	}
}


function ToolBar(props){
	return (
			<div>
				<Info></Info>
			</div>
		)
}

export default class Com extends Component{
	render(){
		return (
			<Provider value={store}>
				<ToolBar></ToolBar>
			</Provider>
		)
	}
}