React 之 Context API（一）

一、前言

自从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、注意事项

1. 可以创建多个Context；
2. 每个Context都有自己的Provider和Consumer；
3. 同一个Context的Provider要在Consumer外层，Consumer才能被通知；
4. 同一个Context的Provider与同一个Context的Consumer要对应；
5. 同一个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对象！

1. 那么我们看看【例二】中的源码：

• App顶级标签是<ContextA.Provider>
• ChildA和ChildB的顶级标签是<ContextB.Consumer>

2. 再看看渲染出来的结果，我们可以猜测出以下事实

• Provider和Consumer都是React的组件；
• 在渲染时，它们自己没有对应替换的HTML标签，而是React直接将它们的props.children给渲染出来；