实际上你已经懂的react高阶组件

用到的原因是因为公司最近要做一个钉钉oa系统，选的技术栈则是比较火热的react,开发中 遇到的问题就是代码如何复用问题 ，因为react官方已经不推荐使用 Mixins ,而是推荐了 高阶组件 这种方式，接下来我们就来聊聊它

高阶组件的概念

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

意思是:高阶组件是一个函数，它接受一个组件并返回一个新组件

利用函数带你理解高阶组件

举个例子:chestnut::假设我们现在需要实现一个登陆注册功能，为了方便，我们把用户（user）存在 localStorage 下， 如果发生操作行为就会先去检测下有没有user （当然现实开发不可以这样做的） 代码实现：

// 登陆
  function login() {
    let user = localStorage.getItem('user');
    console.log('login ' + login);
}
// 注册
function resgister() {
    let user = localStorage.getItem('user');
    console.log('resgister ' + user);
}

login();
resgister();
复制代码

上面的例子我们发现都有一句一模一样的冗余代码，这显然对于有代码洁癖的人简直不能忍，那就动手将它抽离出来挨打吧

代码实现：

// 登陆
  function login() {
    console.log('login ' + login);
}
// 注册
function resgister() {
    console.log('resgister ' + user);
}
// 抽离出来的中间函数
function wrapUser(Wrapfunc) {
    let Newfunc = () => {
       let user = localStorage.getItem('user');
       Wrapfunc(user);
    };
    return Newfunc;
}
// 调用
login = wrapUser(login);
resgister = wrapUser(resgister);
login();
resgister();
复制代码

以上的例子我们可以把 wrapUser称为高阶函数 ，它负责的是就是把我们共用代码抽离的出来，这样简化了复用的代码，很多同学会问，上面的代码量不是更加多了吗？但是实际开发项目时候复用的代码可不是这么一丁点，还有可能有其他需求产生复用这段代码就比如产品临时加了 需要忘记密码的功能

代码如下:

function forgetPassWord(){
    console.log('forgetPassWord ' + user);
 }
 forgetPassWord = wrapUser(forgetPassWord);
 forgetPassWord()
复制代码

从高阶函数来看高阶组件

上面的代码如果用react方式是怎么实现的

Login组件

import React, {Component} from 'react'
class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            user: ''
        }
    }

    componentWillMount() {
        let user = localStorage.getItem('user');
        this.setState({
            user
        })
    }

    render() {
        return (
            <div>login{this.state.user}</div>
        )
    }
}

export default Login;

复制代码

Register组件

import React, {Component} from 'react'
class Register extends Component {
    constructor(props) {
        super(props);
        this.state = {
            user: ''
        }
    }
    componentWillMount() {
        let user = localStorage.getItem('user');
        this.setState({
            user
        })
    }
    render() {
        return (
            <div>register{this.state.user}</div>
        )
    }
}

export default Register;
复制代码

可以看到这个组件这两个组件都有复用的代码， 所以我们上述高阶函数wrapUser的例子来实现高阶组件

WrapUser高阶组件

import React, {Component} from 'react'

export default (WrapComponent) => {
    // 这里的WrapComponent是我们传进来的组件
    class NewComponent extends Component {
        constructor() {
            super();
            this.state = {
                user: ''
            }
        }

        componentWillMount() {
            let user = localStorage.getItem('user');
            this.setState({
                user
            })
        }

        render() {
            return <WrapComponent user={this.state.user}/>
        }
    }

    return NewComponent
}
复制代码

上述的代码是声明一个函数这个函数从参数是接收一个组件，然后return回去一个新的组件，咋一看有同学发现这个很像是 父组件套了一个子组件 ，没错实际上就是这样的，而且他们的通信也是 父子组件通信

这样我们来简化下login组件和register组件

Login组件

import React, {Component} from 'react';
import WrapUser from 'WrapUser';

class Login extends Component {

    render() {
        return (
            <div>login{this.props.user}</div>
        )
    }
}

Login = WrapUser(Login);

export default Login;
复制代码

Register组件

import React, {Component} from 'react';
import WrapUser from 'WrapUser';

class Register extends Component {

    render() {
        return (
            <div>register{this.props.user}</div>
        )
    }
}

Register = WrapUser(Register);

export default Register;
复制代码

到这里我们代码复用性的问题就解决了，高阶组件实际就是一个函数，并不要被它的名称所吓倒

总结

• 高阶组件的目的就是为了解决代码复用性问题
• 高阶组件的通信是按照父子通信机制的