高阶组件

高阶函数

高阶函数是指满足下列条件之一的函数
1、接受一个或多个函数作为输入；
2、返回一个函数；

Mixins的缺点

1、破坏组件封装性：Mixin可能会引入不可见的属性。例如在渲染组件中使用Mixin方法，给组件带来了不可见的属性(props)和状态(state)。并且Mixin可能会相互依赖，相互耦合，不利于代码维护
2、不同的Mixin中的方法可能会相互冲突

定义
高阶组件指的是接受一个组件作为参数并返回一个新的组件。高阶组件是一个函数，并非一个组件。

高阶组件的实现方式
1、属性代理（Props Proxy）

function ppHOC (WrappedComponent) {
    return class PP extends React.Component {
        render () {
            return <WrappedComponent {...this.props} />
        }
    }
}

从代码中我们可以看出高阶组件的render方法中，返回被包裹组件。我们把高阶组件收到的Props传递给他，因此得名Props Proxy
2、反向继承（Inheritance Inversion）

    function iiHOC(WrappedComponent) {
        return class Enhancer extends WrappedComponent {
            render() {
                return super.render()
            }
       }
    }

如代码所示，高阶组件返回的组件继承了被包裹组件。

高阶组件的作用

我们可以使用高阶组件来实现代码复用，代码模块化，逻辑抽象等。还可以进行如下使用

操作Props
原理：传给WrappedComponent的组件首先都会传给WrapperComponent，所以我们在WrapperComponent中能对Props进行相应的修改。
代码:

 function ppHOC (WrappedComponent) {
        return class PP extends React.Component {
            render () {
                const nextProps = {
                    name: 'lta'
                }
                return <WrappedComponent {...this.props} {...nextProps} />
            }
        }
   }

通过上面的代码，我们的WrappedComponent组件接收的Props中，就会增加一个name的属性。

抽象state
可以通过向WrappedComponent传递Props和回调函数来抽象state

function ppHOC(WrappedComponent) {
  return class PP extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        name: ''
      }
      this.onNameChange = this.onNameChange.bind(this)
    }
    onNameChange(event) {
      this.setState({
        name: event.target.value
      })
    }
    render() {
      const newProps = {
        name: {
          value: this.state.name,
          onChange: this.onNameChange
        }
      }
      return <WrappedComponent {...this.props} {...newProps}/>
    }
  }
}

使用方法:

@ppHOC
class Example extends React.Component {
  render() {
    return <input name="name" {...this.props.name}/>
  }
}

通过这种操作是Input编程一个受控组件

渲染劫持（反向继承）

function iiHOC(WrappedComponent) {
  return class Enhancer extends WrappedComponent {
    render() {
      if (this.props.loggedIn) {
        return super.render()
      } else {
        return null
      }
    }
  }
}

通过该方法可以条件性地渲染组件。

与Mixin的区别
高阶组件是属于函数式编程思想，对于被包裹的组件不会感知到高阶组件的存在，而高阶组件返回的组件能增强原来组件的的功能。Mixin是一种混入模式，会不断增加组件的方法和属性，组件本身不仅可以感知，甚至需要处理。一但使用Mixin的地方多时，整个组件就会变得难以维护。

高阶组件

高阶函数

Mixins的缺点

高阶组件

高阶组件的作用

推荐阅读更多精彩内容