高阶组件

高阶函数

• 高阶函数是指满足下列条件之一的函数
  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的地方多时，整个组件就会变得难以维护。