Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。
在一个典型的 React 应用中，数据是通过 props 属性由上向下（由父及子）的进行传递的，但这对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI主题），这是应用程序中许多组件都所需要的。 Context 提供了一种在组件之间共享此类值的方式，而不必通过组件树的每个层级显式地传递 props 。
Context 设计目的是为共享那些被认为对于一个组件树而言是“全局”的数据
是不是可以理解为：Context是一个局部的全局变量
来看一个例子
function F1(props) {
return (
<div className="border">
1111,{props.n1}
<F2 n2={props.n1} />
</div>
);
}
function F2(props) {
return (
<div className="border">
2222,{props.n2}
<F3 n3={props.n2} />
</div>
);
}
function F3(props) {
return (
<div className="border">
3333,{props.n3}
<F4 n4={props.n3} />
</div>
);
}
function F4(props) {
return <div className="border">4444, {props.n4}</div>;
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
n: 99
};
}
render() {
return <F1 n1={this.state.n} />;
}
}
如果想在F4里获取到App里的n，必须要一层层的传下去
再来看看如果使用Context该怎么做
function F1() {
return (
<div className="border">
1111
<F2/>
</div>
);
}
function F2() {
return (
<div className="border">
2222
<F3/>
</div>
);
}
function F3() {
return (
<div className="border">
3333
//必须用ThemeContext.Consumer包裹住想要获取值的组件，然后用函数的方式传值
<ThemeContext.Consumer>
{(n) => <F4 n4={n} />}
</ThemeContext.Consumer>
</div>
);
}
function F4(props) {
return (
<div className="border">4444, {props.n4}</div>
)
}
//声明ThemeContext
const ThemeContext = React.createContext();
class App extends React.Component {
render() {
return (
<div>
//必须用ThemeContext.Provider包裹外层
//在value里设置初始值
<ThemeContext.Provider value='99'>
return <F1 />
</ThemeContext.Provider>
</div>
)
}
}
来看看babel编译以后的样子就更容易理解了
来对这块做个解析
<ThemeContext.Consumer>
{(n) => <F4 n4={n} />}
</ThemeContext.Consumer>
我们试着来还原一下这个结构
function F1(){
console.log('我被调用了')
return 'F1'
}
function Abc(props){
//可以直接打印{F1}的值
console.log(props.children)
//也可以直接调用F1
props.children()
return (
<div>
{props.x}
{props.children} //通过这个可以拿到{F1}
</div>
)
}
function App(){
return (
<Abc x='Abc'>
{F1}
</Abc>
)
}
在Abc里调用F1时，可以给F1传值
function Abc(props){
let x = 100
//调用F1时给它传值
props.children(x)
return (
<div>
{props.x}
{props.children} //通过这个可以拿到{F1}
</div>
)
}
function App(){
return (
<Abc x='Abc'>
//直接使用箭头函数
{(n)=>console.log('我得到的信息是',n)}
</Abc>
)
}
现在就很清楚了，Abc就是ThemeContext.Consumer
function ThemeContext.Consumer(props){
let x = 100
//调用F1时给它传值,并且可以得到F1的返回值
let result = props.children(x)
return (
<div>
{props.children} //通过这个可以拿到{F1}
</div>
)
}
function App(){
return (
<ThemeContext.Consumer >
//直接使用箭头函数,把F1里的内容换成标签,
{(n)=><div>{n}</div>}
</ThemeContext.Consumer>
)
}
这样就解释了ThemeContext.Consumer是什么东西----一个接受函数的组件
再回过头来看
<ThemeContext.Provider value='99'>
return <F1 />
</ThemeContext.Provider>
ThemeContext.Provider的value不光能传普通的数字、字符串，也可以传函数、对象
来实现一个通过ThemeContext.Provider让孙元素调用改变值的列子
function F1() {
return (
<div className="border">
1111
<F2/>
</div>
);
}
function F2() {
return (
<div className="border">
2222
<F3/>
</div>
);
}
function F3() {
return (
<div className="border">
3333
<ThemeContext.Consumer>
{(x)=><F4 n4={x.n} setN={x.setN} />}
</ThemeContext.Consumer>
</div>
);
}
function F4(props) {
return (<div className='border'>
<div className="border">4444, {props.n4}</div>
<button onClick={props.setN}>Click me</button>
</div>
)
}
const ThemeContext = React.createContext();
class App extends React.Component {
constructor(props){
super()
this.state = {
x : {
n : 99,
setN : ()=>{
this.setState({
x : {
...this.state.x, //拓展运算符，保留之前的this.state.x
n : this.state.x.n + 1
}
})
}
}
}
}
render() {
return (
<div>
<ThemeContext.Provider value={this.state.x}>
return <F1 />
</ThemeContext.Provider>
</div>
)
}
}
