react context API配合高阶组件的实际应用

本是古典何须时尚 2022-04-16 00:50 220阅读 0赞

#### 文章概览 ####

本文包含新版本react contextAPI的简单介绍、基本用法和实际项目中的使用方法。  
本文不会介绍context和高阶组件的概念，而是介绍二者如何配合使用。

#### 简介 ####

react在16.3版本引入了全新的context api，提供一种跨组件传递数据的方法，避免了在多组件层级间手动传递props。

#### 基本用法 ####

项目中很多组件需要共有的状态比如：主题、地区偏好。如何优雅的处理呢？当然了，借助redux、mobx这些状态库可以轻松实现。但是小项目中无需引入redux等增加复杂度，让新手迷惑。  
我们考虑使用context如何处理上边的问题，下边的例子为按钮添加light或dark主题：

*  **创建主题context**

const THEME = {
        light: "light",
        dark: "dark",
    };
    const ThemeContext = React.createContext(THEME.light);

*  **使用主题**

class ButtonCus extends Component{
        render() {
            return (
                <ThemeContext.Consumer>
                    {theme => (
                        <button className={theme}>button</button>
                    )}
                </ThemeContext.Consumer>
            );
        }
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pRdWVyeV9RUQ_size_16_color_FFFFFF_t_70]  
现在按钮使用context创建时默认的主题`light`,如果想使用`dark`主题需要显示提供`Provider`进行切换,像这样：

<ThemeContext.Provider value={THEME.dark}>
        <ButtonCus/>
    </ThemeContext.Provider>

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pRdWVyeV9RUQ_size_16_color_FFFFFF_t_70 1]  
context的简单使用就是这样

--------------------

**如果每个组件都写一个Consumer，那将是多么痛苦的事。有没有简洁点的不用每次都写Consumer，能不能实现动态切换主题？**  
答案是肯定的  
接下来将切换主题的接口放入context，实现在嵌套层级中切换主题；将Consumer封装在高阶组件中实现简洁的使用Consumer；

*  **在顶层将当前应用的主题和切换主题的方法作为context的值向下传递**

这里需要将组件状态作为Provider的值传递

class App extends Component{
    
        constructor(props){
            super(props);
            this.switchTheme = this.switchTheme.bind(this);
    
            //将当前应用的主题和切换主题的方法作为context的值向下传递
            this.state = {
                theme: THEME.light,
                switchTheme: this.switchTheme
            };
        }
        switchTheme() {
            this.setState(state => {
                return {
                    theme: state.theme === THEME.light
                        ? THEME.dark
                        : THEME.light
                }
            })
        }
        render(){
            return(
                <div>
                    <ThemeContext.Provider value={this.state}>
                        <ButtonCus/>
                        <ButtonCus/>
                        <ButtonCus/>
                        <ButtonCus/>
                    </ThemeContext.Provider>
                </div>
            )
        }
    }

*  **高阶组件封装context的使用逻辑**

//高阶组件将contest的使用逻辑提取出来，需要应用主题的组件只需像使用普通props一样使用主题即可
    function withContext(Comp) {
        return function (props) {
            return (
                <ThemeContext.Consumer>
                    {theme => <Comp {...props} theme={theme}/>}
                </ThemeContext.Consumer>
            )
        }
    }

*  **修改之前的Component 组件**

任意组件只要使用withContext包裹后都可以收到名为`theme`的属性，将其应用在合适的位置即可。

class ButtonCus extends Component{
        render() {
            return (
                <button
                    className={this.props.theme.theme}
                    onClick={this.props.theme.switchTheme}>button
                </button>
            );
        }
    }
    
    //使用高阶组件将普通组件应用上主题, 将高阶组件返回的组件赋值为用户命名组件，便于使用
    ButtonCus = withContext(ButtonCus);
    
    export {ButtonCus}

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pRdWVyeV9RUQ_size_16_color_FFFFFF_t_70 2]  
到此，点击任意按钮都可以切换全局主题。

#### 后记 ####

context有能力处理全局状态，配合高阶组件简化繁琐的代码，意味着小型应用完全可以使用context处理全局状态。当然redux/mobx管理大型应用状态会更加优秀。

#### 相关链接 ####

[本文完整代码示例][Link 1]

[新浪微博][Link 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pRdWVyeV9RUQ_size_16_color_FFFFFF_t_70]: /images/20220416/d2f2f795f4aa40ba81b69ebef857b956.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pRdWVyeV9RUQ_size_16_color_FFFFFF_t_70 1]: /images/20220416/48dfcf9e7b5e44838005c70b459a71db.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pRdWVyeV9RUQ_size_16_color_FFFFFF_t_70 2]: /images/20220416/5c665610165c4bffb3f40946309bb439.png
[Link 1]: https://github.com/lishiwenjing/Blog-code/tree/master/2018-11-8-react-context
[Link 2]: http://weibo.com/lishiwen01