React-高阶组件-应用场景

前言

React高阶组件（Higher-Order Components，HOCs）是一种强大的模式，用于在React应用中复用组件逻辑。它们可以用于各种应用场景，包括但不限于以下几个：

代码复用：HOCs允许你将通用的组件逻辑抽取出来，以便在多个组件之间共享。这样可以减少重复代码的数量，提高代码的可维护性。

状态管理：你可以使用HOCs来处理全局状态管理或组件之间的状态逻辑。例如，使用Redux或Mobx管理应用的状态，然后将状态注入到组件中。

权限控制：HOCs可以用于控制组件的访问权限。你可以创建一个HOC，检查用户是否有足够的权限来查看特定的组件或页面。

数据获取：HOCs可以用于处理数据的获取和传递。你可以创建一个HOC，负责从API或其他数据源获取数据，并将数据传递给包装的组件。

性能优化：HOCs还可以用于性能优化。通过将常用的逻辑提取到HOC中，可以避免不必要的渲染或数据获取，提高应用程序的性能。

日志和错误处理：你可以使用HOCs来添加日志记录或错误处理逻辑，以便更轻松地调试和监视应用程序。

下面将介绍几个常用的

代码复用

代码语言：javascript复制

import React from 'react';

const UserContext = React.createContext({});

const {Provider, Consumer} = UserContext;

class Son1 extends React.PureComponent {
    render() {
        return (
            <div>
                <p>{this.props.name}</p>
                <p>{this.props.age}</p>
            </div>
        )
    }
}

class Son2 extends React.PureComponent {
    render() {
        return (
            <ul>
                <li>{this.props.name}</li>
                <li>{this.props.age}</li>
            </ul>
        )
    }
}


const Father1 = EnhancedComponent(Son1);
const Father2 = EnhancedComponent(Son2);

class App extends React.PureComponent {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <Provider value={{name: 'yangbuyiya', age: 18}}>
                <Father1/>
                <Father2/>
            </Provider>
        )
    }
}

function EnhancedComponent(WrappedComponent) {
    class component extends React.PureComponent {
        render() {
            return (
                <Consumer>{
                    value => {
                        return (
                            <WrappedComponent name={value.name} age={value.age}/>
                        )
                    }
                }</Consumer>
            )
        }
    }
    return component;
}

export default App;

增强 Props

代码语言：javascript复制

import React from 'react';

const UserContext = React.createContext({});
const {Provider, Consumer} = UserContext;

class Son1 extends React.PureComponent {
    render() {
        return (
            <div>
                <p>{this.props.name}</p>
                <p>{this.props.age}</p>
                <p>{this.props.country}</p>
            </div>
        )
    }
}

class Son2 extends React.PureComponent {
    render() {
        return (
            <ul>
                <li>{this.props.name}</li>
                <li>{this.props.age}</li>
                <li>{this.props.country}</li>
            </ul>
        )
    }
}

function EnhancedComponent(WrappedComponent) {
    return class Component extends React.PureComponent {
        render() {
            return (
                <Consumer>{
                    value => {
                        return (
                            <WrappedComponent {...value} {...this.props}/>
                        )
                    }
                }</Consumer>
            )
        }
    }
}

const Father1 = EnhancedComponent(Son1);
const Father2 = EnhancedComponent(Son2);

class App extends React.PureComponent {
    render() {
        return (
            <Provider value={{name: 'zs', age: 18}}>
                <Father1 country={'中国'}/>
                <Father2 country={'俄罗斯'}/>
            </Provider>
        )
    }
}

export default App;

抽离 State / 生命周期拦截

代码语言：javascript复制

import React from 'react';
import {EventEmitter} from 'events';

const UserContext = React.createContext({});
const {Provider, Consumer} = UserContext;
const eventBus = new EventEmitter();

class Son1 extends React.PureComponent {
    render() {
        return (
            <div>
                <p>{this.props.name}</p>
                <p>{this.props.age}</p>
                <p>{this.props.country}</p>
                {
                    this.props.list.map(name => {
                        return <p key={name}>{name}</p>
                    })
                }
            </div>
        )
    }
}

class Son2 extends React.PureComponent {
    render() {
        return (
            <ul>
                <li>{this.props.name}</li>
                <li>{this.props.age}</li>
                <li>{this.props.country}</li>
                {
                    this.props.list.map(name => {
                        return <li key={name}>{name}</li>
                    })
                }
            </ul>
        )
    }
}

function EnhancedComponent(WrappedComponent) {
    return class Component extends React.PureComponent {
        constructor(props) {
            super(props);
            this.state = {
                list: []
            }
        }

        componentDidMount() {
            eventBus.addListener('update', this.update.bind(this));
        }

        componentWillUnmount() {
            eventBus.removeListener('update', this.update.bind(this));
        }

        update(list) {
            this.setState({
                list: list
            });
        }

        render() {
            return (
                <Consumer>{
                    value => {
                        return (
                            <WrappedComponent {...value} {...this.props} {...this.state}/>
                        )
                    }
                }</Consumer>
            )
        }
    }
}

const Father1 = EnhancedComponent(Son1);
const Father2 = EnhancedComponent(Son2);

class App extends React.PureComponent {
    render() {
        return (
            <Provider value={{name: 'zs', age: 18}}>
                <Father1 country={'中国'}/>
                <Father2 country={'俄罗斯'}/>
                <button onClick={() => {
                    this.btnClick()
                }}>按钮
                </button>
            </Provider>
        )
    }

    btnClick() {
        eventBus.emit('update', ['鲁班', '虞姬', '黄忠']);
    }
}

export default App;

权限控制

代码语言：javascript复制

import React from 'react';

class Info extends React.PureComponent {
    render() {
        return (
            <div>用户信息</div>
        )
    }
}

class Login extends React.PureComponent {
    render() {
        return (
            <div>用户登录</div>
        )
    }
}

function EnhancedComponent(WrappedComponent) {
    return class Authority extends React.PureComponent {
        render() {
            if (this.props.isLogin) {
                return <WrappedComponent/>
            } else {
                return <Login/>
            }
        }
    }
}

const AuthorityInfo = EnhancedComponent(Info);

class App extends React.PureComponent {
    render() {
        return (
            <AuthorityInfo isLogin={false}/>
        )
    }
}

export default App;

官方文档

• https://zh-hans.reactjs.org/docs/higher-order-components.html#gatsby-focus-wrapper

输入图片说明

最后

本期结束咱们下次再见