React高阶组件

前段时间在工做中写Hybrid页面时遇到了这样的一个场景，公司须要一系列的活动组件，在每一个组件注册的时候都须要调用App端提供的一个接口。一开始也考虑了几种方式，包括mixin、组件继承以及react高阶组件。但通过了种种衡量，最后选择使用了高阶组件的作法。

一、Mixins的缺点

React官方已不推荐使用Mixins的技术来实现代码的重用，Mixins技术有一系列的缺点，首先Mixins会形成命名冲突，咱们经过如下的方式来注入Mixins：

var myMixins = require('myMixins');

var Button = React.createClass({
    mixins: [myMixins],
    
    // ...
})

若是你须要注入多个mixins,其中一个是本身的，另外的多是第三方的。那有可能在两个mixins里使用了相同名称的方法，这会使得其中的一个不起做用，而你能作的只有修改其中一个方法的名称。另外一方面，一个mixins一开始多是很是简单的，仅仅须要实现某一个功能，但当业务越加的复杂，须要往其中加入更多的方法的时候，就会变得很是复杂。要深刻了解mixins的缺点，能够查看官方博客。

二、组件继承

对于我本身来讲这种方法之前使用的比较多，先建立一个BaseComponent，在其中实现一系列公共的方法，其后的每一个组件都继承于这个组件，但缺点是不够灵活，在基础组件中只能实现一些比较固定的方法，而对于每一个组件的定制化会有很大的限制。

三、React高阶组件

因为mixins的一系列缺点，React官方也意识到使用mixins所带来的痛点远远高于技术自己产生的优势，而高阶组件即可以代替mixins，并且当深刻以后它还有着更加丰富的用法。

高阶组件（HOC）是React中对组件逻辑进行重用的高级技术。但高阶组件自己并非React API。它只是一种模式，这种模式是由React自身的组合性质必然产生的。

高阶函数

说到高阶组件，就先得说到高阶函数了，高阶函数是至少知足下列条件的函数：

一、接受一个或多个函数做为输入
二、输出一个函数

在javascript这门函数为一等公民的语言中，高阶函数的使用仍是很是之多的，像咱们平时的回调函数等等，都用到了高阶函数的知识。咱们先来看一个简单的高阶函数

var fun = function(x, y) {
    return x + y;
}

fun是一个函数，下面咱们将整个函数做为参数传递给另外一个函数

var comp = function(x, y, f) {
    return f(x,y);
}

验证一下

comp(1,2,fun) // 3

高阶组件定义

类比高阶函数的定义，高阶组件就是接受一个组件做为参数，在函数中对组件作一系列的处理，随后返回一个新的组件做为返回值。

咱们先定义一个高阶组件BaseActivity

const BaseActivity = (WrappedComponent) => {
  return class extends Component {
    render() {
      return (
        <section>
          <div>个人包裹组件</div>
          <WrappedComponent />
        </section>
        
      )
    }
  }
}

组件接受一个被包裹的组件做为参数，返回了一个通过处理的匿名组件。
在其余组件中使用这个高阶组件

class Example extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      width: '100%',
      height: '100%'
    }
  }

  componentWillMount() {
    if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
      return;
    } else {
      this.setState({
        width: '375px',
        height: '640px'
      })
    }
  }

  render() {
    let { width, height } = this.state;
    return (
      <div className="activity">
        <div className="activity-content" style={{ width, height }}>
          <button className="btn">参加活动</button>
        </div>
      </div>
    )
  }
}

export default BaseActivity(Example);

具体用法就是在export 组件的时候，使用BaseActivity函数来包裹这个组件，看下输出的react dom内容

在Example组件外面包裹了一个匿名组件。

参数

既然高阶组件是一个函数，咱们就能够向里面传递咱们须要的参数

const BaseActivity = (WrappedComponent, title) => {
  return class extends Component {
    render() {
      return (
        <section>
          <div>{title}</div>
          <WrappedComponent />
        </section>
        
      )
    }
  }
}

在Example中这样export

export default BaseActivity(Example, '这是高阶组件的参数');

咱们看下输出的react dom

能够看到参数已经传递进去了。

固然还能够这样用(柯里化)

const BaseActivity (title) => (WrappedComponent) => {
  return class extends Component {
    render() {
      return (
        <section>
          <div>{title}</div>
          <WrappedComponent />
        </section>
        
      )
    }
  }
}

在Example中这样export

export default BaseActivity('这是高阶组件的参数')(Example);

这种用法在ant-design的表单以及redux的connect中咱们均可以看到

// ant
const WrappedDemo = Form.create()(Demo)

// redux
export default connect(mapStateToProps, mapDispatchToProps)(Counter)

高阶组件还能够扩展原组件的props属性，以下所示：

const BaseActivity (title) => (WrappedComponent) => {
  return class extends Component {
    render() {
      const newProps = {
          id: Math.random().toString(8)
      }
      return (
        <section>
          <div>{title}</div>
          <WrappedComponent {...this.props} {...newProps}/>
        </section>
      )
    }
  }
}

看下输出的react dom

高阶组件的缺点

高阶组件也有一系列的缺点，首先是被包裹组件的静态方法会消失，这其实也是很好理解的，咱们将组件当作参数传入函数中，返回的已经不是原来的组件，而是一个新的组件，原来的静态方法天然就不存在了。若是须要保留，咱们能够手动将原组件的方法拷贝给新的组件，或者使用hoist-non-react-statics之类的库来进行拷贝。

结语

高阶函数对于初学者来讲可能不太好理解，但当你深刻其中，了解其中的原理以后，咱们可使用高阶函数来完成不少的工做。

若是喜欢就给个Star吧，^_^