通俗理解 React 高阶函数

定义：高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。

A higher-order component is a function that takes a component and returns a new component.

函数模拟高阶组件

1. 最普通的方法，一个welcome，一个goodbye。两个函数先从localStorage读取了username，然后对username做了一些处理。

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

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

welcome();
goodbey();

我们发现两个函数有一句代码是一样的，这叫冗余。

我们要写一个中间函数，读取username,他来负责把username传递给两个函数。

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 <