[React] Context 基础用法

参考 React 官方文档

props传值示例

function Father() {
    const [color, setColor] = React.useState('black');

    return (
        <div>
            {/* 父组件将 color 变量传递给子组件 */}
            <Son color={color}/>
            <button onClick={() => setColor(color === 'black' ? 'red' : 'black')}>Toggle Color</button>
        </div>
    );
}

function Son(props) {
    // 子组件接收到 color 属性，然后传递给孙子组件，其本身用不到这个变量
    // 如果应用中每一个 GrandSon 都需要知道 color 的值，代码会变得很繁琐
    return (
        <div>
            <GrandSon1 color={props.color}/>
            <GrandSon2 color={props.color}/>
        </div>
    );
}

function GrandSon1(props) {
    return <div style={{ color: props.color }}>The first grandson likes cat.</div>
}

function GrandSon2(props) {
    return <div style={{ color: props.color }}>The second grandson likes dog.</div>
}

export default Father;

使用 Context 跨组件传值

React.createContext：创建一个 Context 对象，每个 Context 对象都会返回一个 Provider React 组件，它允许消费组件订阅 context 的变化。

Context.Provider： 接收一个 value 属性，传递给消费组件；value 值发生变化时，它内部的所有消费组件都会重新渲染。

Context.Consumer： 消费组件，基于 context 值进行渲染

// 为当前的 color 创建一个 context 变量，createContext的参数为默认值
const ColorContext = React.createContext('red');

function Father() {
    const [color, setColor] = React.useState('black');

    return (
        <div>
            <ColorContext.Provider value={color}>
                <Son/>
            </ColorContext.Provider>
            <button onClick={() => setColor(color === 'black' ? 'red' : 'black')}>Toggle Color</button>
        </div>
    );
}

function Son() {
    return (
        <div>
            <GrandSon1/>
            <GrandSon2/>
        </div>
    );
}

function GrandSon1() {
    return (
        <ColorContext.Consumer>
            {color => <div style={{ color }}>The first grandson likes cat.</div>}
        </ColorContext.Consumer>
    )
}

function GrandSon2() {
    return (
        <ColorContext.Consumer>
            {color => <div style={{ color }}>The second grandson likes dog.</div>}
        </ColorContext.Consumer>
    )
}

export default Father;

useContext 取代 Context.Consumer

function GrandSon1() {
    const color = React.useContext(ColorContext);
    return <div style={{ color }}>The first grandson likes cat.</div>
}