从高阶函数--->高阶组件

作者：李群彬 原文地址
前言

今天有幸去参加了下别人公司的分享会，我带着想让个人给我梳理下我对高阶组件了解比较混乱的思路，但分享的内容跟我期望方向不在一个点上，所以结束后我还是想象，我自己来梳理下自己对高阶组件浅显的理解。希望大家给予指导

要讲高阶组件，先让我介绍下高阶函数，这样类比下就很容易理解了。

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

一、高阶函数

高阶函数（Higher Order Function）,按照维基百科上面的定义，至少满足下列一个条件的函数

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

简单的例子：

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方法也是高阶函数。
注：一开始我都不知道这几个常用的方法居然就是高阶函数，拿map展示下

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]

函数柯里化

在计算机科学中，柯里化（英语：Currying），又译为卡瑞化或加里化，是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。

对我的的理解就是函数里面的函数分次传进去，我自己写了个非常简单的例子。

var add = function(x) {
    return function(y) {
      return function(z){
        console.log('curr',x,y,z)
         return x+y+z;
        };
    };
  };

  console.log(add(1)(5)(5));//传三个参数
  ///currying 1 5 5
  //11
  console.log(add(1)(5));//如果传两个参数，则会把第三个函数返回出来
  /*ƒ (z) {
            console.log('currying', x, y, z);
            return x + y + z;
          }
  */
  //如果多传则会报错

所以，我对柯里化的运用场景还是比较少的。

不知为何， 我觉得上面那个栗子有点奇怪，所以，我又试了下面这个栗子，可以无限传参；

  var add = function(action) {
    var sumFun = function(doing){

      var sum = '';
      if(action == 'sum'){
        console.log('befor',sum)
        if(doing){
          sum = doing;
        }else{
          sum = 'nothing'
        }

      }
      console.log('lastSum='+sum);
      return sumFun ;
    }
    return sumFun ;
  };

add('sum')(2)(3)();//2  3 nothing;
add('sum')(2)(3)(4)(5);// 2 3 4 5
ES6的中的写法其实会比较清晰
var add2 = x => y => x+y;
var add3 = add2(2)

 console.log('add2',add2(2)) //返回一个方法，不调用后面的函数
 console.log('add3',add3(5)) //7 
// 分步传参，第二次调用时才会去执行函数。

总结(我的理解):柯里化函数就是一种分步传参的函数，可以提前传参而不让他执行内容，但是参数满足时再调用函数。感觉可以用来做一些未知的判断。

二、高阶组件

高阶组件就是一个 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;

注意

1、官方推荐在高阶组件里尽量不要设置state值，传值的话可以用props的方法。

2、尽量不去改变原始组件，而是通过组合的方式。