一、前言
自从React v16.3.0起，React推出了一个新的东西“Context（上下文）”，其字面意思就是其实际的功能。
如果用过Redux的话，那么Context就很好理解，它的出现就是解决：
- props传递的层次过深，导致父、子、孙等过于耦合，以及后期的难以维护；
- 多处引用同一组件而导致数据展示（更新）不一致（也就是我们所说的数据共享）；
Redux的出现，解决了以上两个问题，那么为什么还要新增Context呢？
这个问题我们先放在这儿，这个系列的最后我们再来给出对比！
二、Context、Provider、Consumer
2.1、Context
Context就是一个上下文，它可以将父、子、孙等组件需要关心的数据放在其中，而无需开发
者手动通过props来传递，创建方式也很简单：
import React from "react";
export const GlobalContext = React.createContext();
通过createContext方法就能创建一个Context。
2.2、Provider和Consumer
顾名思义，Provider就是生产者，Consumer就是消费者；生产者产生了东西（这里就是产生了数据，或数据发生了变化），消费者拿到变化后的数据，进行相应的改变；
它俩都来自于Context：
const {Provider, Consumer} = React.createContext();
使用方式也很简单：
const GlobalContext = React.createContext();
function App() {
return (
<GlobalContext.Provider value={'chris'}> // 这里放置了一个简单的值
<GlobalContext.Consumer>
{(name) => <div>{name}</div>}
</GlobalContext.Consumer>
</GlobalContext.Provider>
);
}
2.3、注意事项
- 可以创建多个Context；
- 每个Context都有自己的Provider和Consumer；
- 同一个Context的Provider要在Consumer外层，Consumer才能被通知；
- 同一个Context的Provider与同一个Context的Consumer要对应；
- 同一个Context的Provider包裹中，可以有多个分散不同地方的来自同一个Context的Consumer；
//【例一】
const ContextA = React.createContext();
const ContextB = React.createContext();
// ContextB的Consumer是拿不到ContextA中的数据的
function App() {
return (
<ContextA.Provider value={{name: 'chris'}}> // 这里放置了一个对象
<ContextB.Consumer>
{(user) => <div>{user.name}</div>}
</ContextB.Consumer>
</ContextA.Provider>
);
}
//【例二】
const ContextA = React.createContext();
// 同一个Context，多个分散的Consumer
function ChildA(props) => {
return (
<ContextA.Consumer>
{(user) => <div>{user.name}</div>}
</ContextA.Consumer>
);
}
function ChildB(props) => {
return (
<ContextA.Consumer>
{(user) => <div>{user.age}</div>}
</ContextA.Consumer>
);
}
function App() {
return (
<ContextA.Provider value={{name: 'chris', age: 18}}>
<div>App</div>
<ChildA />
<ChildB />
</ContextA.Provider>
);
}
ReactDOM.render(
<React.StrictMode>
<App/>
</React.StrictMode>,
document.getElementById('root')
);
【例二】的运行结果：
context-ret.png
2.4、无标签渲染
我们发现，id为root的div下直接渲染了App组件中的内容，当然，ChildA和ChildB中的内容也直接渲染出来了！我们知道react的render规则：需要返回一个标签的JSX对象！
- 那么我们看看【例二】中的源码：
- App顶级标签是<ContextA.Provider>
- ChildA和ChildB的顶级标签是<ContextB.Consumer>
- 再看看渲染出来的结果，我们可以猜测出以下事实
- Provider和Consumer都是React的组件；
- 在渲染时，它们自己没有对应替换的HTML标签，而是React直接将它们的props.children给渲染出来；
