转载自理解react高阶组件

函数模拟高阶组件

function welcome() {
    let username = localStorage.getItem('username');
    console.log('welcome' + username);
}

function goodbye() {
    let username = localStorage.getItem('username');
    console.log('goodbye' + username);
}

welcome();
goodbye();

function welcome(username) {
    console.log('welcome ' + username);
}

function goodbey(username) {
    console.log('goodbey ' + username);
}

function wrapWithUserName(wrappedFunc) {
    let newFunc = () => {
        let userName = localStorage.getItem('username');
        wrappedFunc(username);
    }
    return newFunc;
}

welcome = wrapWithUserName(welcome);
goodbye = wrapWithUserName(goodbye);

高阶组件

import React, {Component} from 'react';

class Welcome extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username: ''
        }
    }
    
    componentWillMount() {
        let username = localStorage.getItem('username');
        this.setState({
            username
        })
        
        render() {
            return (
                <div>welcome {this.state.username}</div>
            )
        }
    }
}

export dafault Welcome;

import React, {Component} from 'react';

export default (WrappedComponent) => {
    class NewComponent extends Component {
        constructor() {
            super();
            this.state = {
                usernmae: ''
            }
        }
        componentWillMount() {
            let username = localStorage.getItem('username');
            this.setState({
                username: username
            })
        }
        render() {
            return <WrappedComponent username={this.state.username}/>
        }
    }
    return NewComponent
}

welcome组件：

import React, {Component} from 'react';
import wrapWithUsername from 'wrapWithUsername';
class Welcome extends Component {
    render() {
        return (
        <div>welcome {this.props.username} </div>
        )
    }
}

Welcome = wrapWithUSername(welcome);
export default Welcome;