高阶函数与高阶组件

高阶函数：
高阶函数只要满足参数或返回值为函数就可以成为高阶函数，而非一定要同时满足才成立。

高阶组件：
高阶组件是以组件作为参数的组件，结果return一个组件

高阶函数：至少满足下列一个条件的函数。

• 函数作为参数传入
• 返回值为一个函数

简单的例子：

function add(a,b,fn){
    return fn(a)+fn(b);
}
var fn=function (a){
  return a*a;
}
add(2,3,fn); //13

还有一些平时常用的高阶方法： 如Map, Reduce, Filter, Sort 以及现在常用的redux中的connect方法也是高阶函数。

var pow = function square(x) {
    return x * x;
};

var array = [1, 2, 3, 4, 5, 6, 7, 8];
var newArr = array.map(pow); //直接传入一个函数方法
var newArr = array.map((item) => {return item * item}); //里面运用一个函数
//返回的一个函数
alert(newArr); // [1, 4, 9, 16, 25, 36, 49, 64]

高阶组件就是一个React组件包裹着另外一个React组件。

// It's a function...
function myHOC() {
  // Which returns a function that takes a component...
  return function(WrappedComponent) {
    // It creates a new wrapper component...
    class TheHOC extends React.Component {
      render() {
        // And it renders the component it was given
        return <WrappedComponent {...this.props} />;
      }
    }

    // Remember: it takes a component and returns a new component
    // Gotta return it here.
    return TheHOC;
  }
}

高阶组件是个纯函数。 接受一个组件参数，然后再return里面是返回一个组件，用来把两个类似的组件进行封装， 然后再高阶组件里面把公共部分写好，然后传给组件。

//Welcome 组件
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: username
        })
    }

    render() {
        return (
            <div>welcome {this.state.username}</div>
        )
    }
}

export default Welcome;

//goodbye 组件
import React, {Component} from 'react'

class Goodbye extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username: ''
        }
    }

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

    render() {
        return (
            <div>goodbye {this.state.username}</div>
        )
    }
}

export default Goodbye;

从上述可见，这两个组件虽然功能不一样，但是两个组件有许多一样的代码，这样感觉就非常的多余。所以，我们就可以做一个高阶组件来整合。

import React, {Component} from 'react'

export default (WrappedComponent) => {
    class NewComponent extends Component {
        constructor() {
            super();
            this.state = {
                username: ''
            }
        }
      
        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;

//高阶的goodbye组件
import React, {Component} from 'react';
import wrapWithUsername from 'wrapWithUsername';

class Goodbye extends Component {

    render() {
        return (
            <div>goodbye {this.props.username}</div>
        )
    }
}

Goodbye = wrapWithUsername(Goodbye);

export default Goodbye;

tips:
1、官方推荐在高阶组件里尽量不要设置state值， 传值的话可以用props的方法。
2、尽量不去改变原始组件，而是通过组合的方式