React-高阶组件-应用场景

代码复用

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: 'BNTang', 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

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 / 生命周期拦截

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;

权限控制

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