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

前言

今天有幸去参加了下别人公司的分享会，我带着想让我的给我梳理下我对高阶组件了解比较混乱的思路，但分享的内容跟我指望方向不在一个点上，因此结束后我仍是想象，我本身来梳理下本身对高阶组件浅显的理解。但愿你们给予指导

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

高阶函数：以函数做为参数的函数，结果return一个函数。
（感谢有人指出错误，高阶函数只要知足参数或返回值为函数就能够成为高阶函数，而非必定要同时知足才成立）
高阶组件：以组件做为参数的组件，结果return一个组件。

1、高阶函数

高阶函数（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
 
// 分步传参，第二次调用时才会去执行函数。
复制代码

总结(个人理解):柯里化函数就是一种分步传参的函数，能够提早传参而不让他执行内容，可是参数知足时再调用函数。感受能够用来作一些未知的判断。

2、高阶组件

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

注意

一、官方推荐在高阶组件里尽可能不要设置state值，传值的话能够用props的方法。 二、尽可能不去改变原始组件，而是经过组合的方式。

提供参考的博文地址： JS中的柯里化(currying)-张鑫旭
React高阶组件（译）
助你彻底理解React高阶组件