React--React的高阶组件是怎么一回事？

A higher-order component is a function that takes a component and returns a new component.这是官方给出的关于高阶组件的解释。通俗讲，高阶组件是一个函数接受一个组件返回一个新的组件。

高阶组件的应用场景

• 代码复用，逻辑抽象
• 渲染劫持
• state抽象和更改
• props更改

  实现方式

  import React, { Component } from 'react'
  
  class WrappedComponent extend Component {
      return (
          <div>这是普通组件</div>
      )
  }
  
  const Hoc = WrappedComponent => {
      //  在此做一些额外的操作
      return <WrappedComponent {...this.props}>
  }

  我们可以看到，Hoc就是一个高阶组件，普通组件WrappedComponent没有什么感知。但是Hoc的出现提高了代码逻辑的复用。

  Hoc和mixin的比较

  mixin的意思是混入。在vue常有这种操作， 而高阶组件属于函数式编程(functional programming)思想，对于被包裹的组件时不会感知到高阶组件的存在，而高阶组件返回的组件会在原来的组件之上具有功能增强的效果。而Mixin这种混入的模式，会给组件不断增加新的方法和属性，组件本身不仅可以感知，甚至需要做相关的处理(例如命名冲突、状态维护)，一旦混入的模块变多时，整个组件就变的难以维护，也就是为什么如此多的React库都采用高阶组件的方式进行开发。