[React]Context机制

Posted 2021-03-02 liuju

在React中，Context机制是为了方便在组件树间传递数据。

例子

import React from ‘react‘
const themes={
    light:"亮色主题",
    dark:"暗色主题"
}
const sexs={
    man:"男性",
    wem:"女性",
}
const SexContext=React.createContext(sexs.man);
const ThemeContext=React.createContext(themes.dark);
export default class Context extends React.Component {
    state={
        theme:themes.light,
        sex:sexs.wem,
    }
    render(){
        return(
            <div>
                <ThemeContext.Provider value={this.state.theme}>
                    <ThemeSwitch />
                </ThemeContext.Provider>
                <SexContext.Provider value={this.state.sex}>
                    <SexSwitch />
                </SexContext.Provider>

            </div>
        );
    }
}

class ThemeSwitch extends React.Component {
    
    render(){
        //let theme=this.context;
        return (
            <ThemeContext.Consumer>
                {value=><button>{value}</button>}
            </ThemeContext.Consumer>
        );
    }
}

class SexSwitch extends React.Component {
    render(){
        let sex=this.context;
        return (
            <button>
                {sex}
            </button>
        );
    }
}
SexSwitch.contextType=SexContext;

这个例子是根据React文档进行修改得到的。

API

Context有几个API是必须要知道的：

React.createContext

作用：创建Context对象
用法：

const MyContext = React.createContext(defaultValue);

MyContext为Context对象名，defaultValue为默认数据。默认数据将会在Cousumer找不到Provider时生效。

Context.Provider

作用：为订阅它的数据在每次value变化时提供更新。
用法：

<MyContext.Provider value={/* 某个值 */}>

Class.contextType

作用：为Class绑定数据源，绑定后可以使用this.context获得Provider的value；
用法：

MyClass.contextType = MyContext;

MyClass为Cousumer所在的组件。

Context.Consumer

作用：在函数式组件中完成订阅context
用法：

<MyContext.Consumer>
  {value => /* 基于 context 值进行渲染*/}
</MyContext.Consumer>

value即为Provider的value属性

有了上面的知识，就可以对例子进行分析了

例子的解读

在例子中，声明了两个Context，分别代表主题和性别，它们是两个指定按钮的text
ThemeSwitch为通过函数式组件订阅context，
SexSwitch通过语句SexSwitch.contextType=SexContext;将SexSwitch与对应context进行绑定，以便使用this.context获得value值。

在使用时，两者的数据通过state输入。

最后的效果：

当有方法修改state时，将会对按钮的值进行修改。
补充后代码如下：

import React from ‘react‘
const themes={
    light:"亮色主题",
    dark:"暗色主题"
}
const sexs={
    man:"男性",
    wem:"女性",
}
const SexContext=React.createContext(sexs.man);
const ThemeContext=React.createContext(themes.dark);
export default class Context extends React.Component {
    state={
        theme:themes.light,
        sex:sexs.wem,
    }
    handleSwitch=()=>{
        let sex=this.state.sex;
        let theme=this.state.theme;

        this.setState({
            sex:sex==sexs.man?sexs.wem:sexs.man,
            theme:theme==themes.dark?themes.light:themes.dark,

        })
    }
    render(){
        return(
            <div>
                <ThemeContext.Provider value={this.state.theme}>
                    <ThemeSwitch />
                </ThemeContext.Provider>
                <SexContext.Provider value={this.state.sex}>
                    <SexSwitch />
                </SexContext.Provider>
                <button onClick={this.handleSwitch}>切换</button>
            </div>
        );
    }
}

class ThemeSwitch extends React.Component {
    
    render(){
        //let theme=this.context;
        return (
            <ThemeContext.Consumer>
                {value=><button>{value}</button>}
            </ThemeContext.Consumer>
        );
    }
}

class SexSwitch extends React.Component {
    render(){
        let sex=this.context;
        return (
            <button>
                {sex}
            </button>
        );
    }
}
SexSwitch.contextType=SexContext;

点击前：

点击切换后：