理解React的高阶组件

一 介入javascript的高阶函数

在JS中，我们知道函数即为对象，它可以作为参数传入另一个函数中，也可以作为函数返回，那么这就很容易理解JS中的高阶函数了。比如说回调函数、参数柯里化（最主要的特征就是将函数作为参数，返回一个单参数调用的函数），ES7中的装饰器等

要了解高阶函数的应用，可以点此。

二 高阶函数在React中的应用--高阶组件

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

高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。

具体而言，高阶组件是参数为组件，返回值为新组件的函数。

const EnhancedComponent = higherOrderComponent(WrappedComponent);

组件是将 props 转换为 UI，而高阶组件是将组件转换为另一个组件。

------引自React的官方文档

下面先放一个例子

declare var React;
// 高阶组件函数HOC highOrderComponent
var hoc = (Component) => {
  return class extends React.Component{
    render(){
      return (
        <div>
          <span>
            HOC
          </span>
          <Component />
        </div>
      );
    }
  }
};


// 子组件 Button.tsx
class Buttons extends React.Component {
  render(){
    const _that = this;
      function click(e) {
        e.preventDefault();
        console.log(_that.props);
      }
    return (
      <button type='button' onClick={click} >Action</button>
    );
  }

  componentDidMount() {
    console.log(this.props);
  }
}

export default hoc(Buttons);


// 父组件 page.tsx
export class Page extends React.Component {
  render(){
    return (
      <Buttons />
    );
  }

  componentDidMount() {
  }
}

上面的例子中，hoc就是一个高阶组件；高阶组件主要有两类

1，属性代理

引入里我们写的最简单的形式，就是属性代理(Props Proxy)的形式。通过hoc包装wrappedComponent，也就是例子中的Usual，本来传给Usual的props，都在hoc中接受到了，也就是props proxy。 由此我们可以做一些操作，包括操作props，refs获取组件实例或者转发实例

操作props
------最直观的就是接受到props，我们可以做任何读取，编辑，删除的很多自定义操作。

refs获取组件实例

------当我们包装子组件的时候，想获取到它的实例，可以通过引用(ref),在子组件挂载的时候，会执行ref的回调函数，在hoc中取到组件的实例。通过打印，可以看到它的props， state，都是可以取到的。同理ref转发。

import React from 'react';
// 高阶组件函数hoc
export default function hoc(Component) {
  class InjectPropsRef extends React.Component {
       // 可以将子组件的逻辑方法提取出来，放到这里
    componentDidMount() {
        console.log(this.props,this.state);
    }

    render() {
      const { forwardRef, ...rest } = this.props;
      const props = {
                name: 'hoc',
                ...rest
            };
        // 子组件ref实例的获取this.proxyRef
      //return (
      //  <Component ref={(refs) => this.proxyRef = refs } {...props} />
      //);
      // 分别实现转发ref实例和props的代理以及对props的操作。
      return (
          <Component ref={forwardRef} {...props} />
      );
    }
  }
 // React.forwardRef转发 InjectPropsRef 
  return React.forwardRef((props, ref) => <InjectPropsRef {...props} forwardRef={ref} />);
}

反向继承

反向继承(Inheritance Inversion)，简称II，与属性代理的方法不同，属性代理是通过堆栈的方法去实现组件嵌套，而反向继承则是通过队列的方法进行继承。其实就是通过继承子组件原理，来产生一个新的组件，并且添加我们需要新增加的功能，并复用子组件。

我们只用对hoc做一些简单的修改就可以了

declare var React;
// 高阶组件函数HOC highOrderComponent
var iiHoc = (Component) => {
  return class extends Component{
    render(){
      // 渲染拦截，可以在后面做if处理，返回不同的render
      const ii = super.render();
      return (
        <div>
          <span>
            iiHOC
          </span>
          {ii}
        </div>
      );
    }
  }
};

结束，写的很简单，如果要详细了解还是要看下官方API