React中Context的基本使用

v16之前传值主要通过props一层层从顶层向下传递。或者通过Redux/MobX进行状态分发。
v16之后React提供了Context这样的一个Api。组件嵌套很深的情况下可以用。
看了官网文档以及一些同僚的文档，对此API有了大概的认识。写了个简单地Demo

顶层组件：

import React from 'react'
import Toolbar from './Toolbar'
export const ThemeContext = React.createContext({ type: 'danger' });
export default class ContextDemo extends React.Component {
    render() {
        let style = { type: 'primary' };
        return <ThemeContext.Provider value={style}>
            <Toolbar />
        </ThemeContext.Provider>;
    }
}

个人理解：React.createContext({ type: 'danger' });为我们提供里一个上下文容器。参数为上下文设置的初始值。主要是要将这个容器暴露出去。官网是吧容器抽成一个文件独立出来了。有点Redux里Reducer的意思。然后通过容器的生产者模式提供一个值，即标签内的value。这样就设置好了容器、初始值、以及要传的值。

中间组件：

import React from 'react'

import ThemedButton from './ThemedButton'
function Toolbar(props) {
    // Toolbar 组件接受一个额外的“theme”属性，然后传递给 ThemedButton 组件。
    // 如果应用中每一个单独的按钮都需要知道 theme 的值，这会是件很麻烦的事，
    // 因为必须将这个值层层传递所有组件。
    return (
        <div>
            <ThemedButton />
        </div>
    );
}
export default Toolbar

个人理解：这段是直接照官网抄的。没有任何上层的props。因为只是个中间组件，不需要实际的上下文内容来渲染什么东西。所以这段没什么东西。

最下层组件：

import React from 'react'
import { Button } from 'antd'
import { ThemeContext } from './ContextDemo'
export default class ThemedButton extends React.Component {

    render() {
        return <ThemeContext.Consumer>
            {
                (style) => <Button type={style.type}>Text</Button>
            }
        </ThemeContext.Consumer>;
    }
}

个人理解：
因为最下层组件需要顶层中的值。所以首先要根据容器构建一个消费者组件。

组件中匿名函数的直接可以取到顶层传过来的值。

主要的一个流程就是这样。
1.顶层组件创建容器以及生产者
2.子组件引入容器构建消费者
好处：这样避免了多层嵌套的时候，每一层都要传props，而且中间层可能还不需要这个玩意儿，写起来就和啰嗦。
弊端：当然也不是说这个方式就完美，官网也说了这东西可能会影响组件的复用。随机应变呗。

最后编辑于：2019.07.22 18:29:25