React高阶组件HOC

高阶组件

1. 为何须要高阶组件？ 高阶组件是一个函数，接收一个组件，而后返回一个新的组件。
   • 这个问题很简单，为何咱们须要react/vue/angular？使用框架最核心的缘由之一就是提升开发效率，能早点下班。同理，react高阶组件可以让咱们写出更易于维护的react代码，能再早点下班~
   • 举个栗子，ES6支持使用import/export的方式拆分代码功能和模块，避免一份文件里面出现"成坨"的代码。同理对于复杂的react组件，若是这个组件有几十个自定义的功能函数，天然要进行拆分，否则又成了"一坨"组件，那么该如何优雅地拆分组件呢？react高阶组件应运而生。
   • 在使用ES5编写react代码时，可使用Mixin这一传统模式进行拆分。新版本的react全面支持ES6并提倡使用ES6编写jsx，同时取消了Mixin。所以高阶组件愈来愈受到开源社区的重视，例如redux等知名第三方库都大量使用了高阶组件。
2. 高阶组件是什么？

• 回答这个问题前，看上图图，高阶函数就是形如y=kx+b的东西，x是咱们想要改造的原组件，y就是改造事后输出的组件。那具体是怎么改造的呢？k和b就是改造的方法。这就是高阶组件的基本原理，是否是一点也不高阶~
• 再举个栗子相信更能让你明白：咱们写代码须要进行加法计算，因而咱们把加法计算的方法单独抽出来写成一个加法函数，这个加法函数能够在各处调用使用，从而减小了工做量和代码量。而咱们独立出来的这个能够随处使用的加法函数，类比地放在react里，就是高阶组件。

3. 如何实现高阶组件？ 从上面的问题回答中，咱们知道了：高阶组件其实就是处理react组件的函数。那么咱们如何实现一个高阶组件？有两种方法：
   • 1.属性代理
   • 2.反向继承

高阶组件（HOC)是React中用于复用组件逻辑的一种高级技巧。HOC自身不是React API的一部分，他是一种基于React的组合特性而造成的数据模式。

不少人看到高阶组件（HOC）这个概念就被吓到了，认为这东西很难，其实这东西概念真的很简单，咱们先来看一个例子。

function add(a, b) {
    return a + b
}
复制代码

如今若是我想给这个 add 函数添加一个输出结果的功能，那么你可能会考虑我直接使用 console.log 不就实现了么。说的没错，可是若是咱们想作的更加优雅而且容易复用和扩展，咱们能够这样去作：

function add(a, b) {
    return a + b
}
function withLog (fn) {
    function wrapper(a, b) {
        const result = fn(a, b)
        console.log(result)
        return result
    }
    return wrapper
}
const withLogAdd = withLog(add)
withLogAdd(1, 2)
复制代码

其实这个作法在函数式编程里称之为高阶函数，你们都知道 React 的思想中是存在函数式编程的，高阶组件和高阶函数就是同一个东西。咱们实现一个函数，传入一个组件，而后在函数内部再实现一个函数去扩展传入的组件，最后返回一个新的组件，这就是高阶组件的概念，做用就是为了更好的复用代码。

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

const EnhancedComponent = higherOrderComponent(WrappedComponent);
复制代码

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

接下来，咱们将讨论为何高阶组件有用，以及如何编写本身的 HOC 函数。

使用 HOC 解决横切关注点问题

注意: 咱们以前建议使用 mixins 用于解决横切关注点相关的问题。但咱们已经意识到 mixins 会产生更多麻烦。阅读更多 以了解咱们为何要抛弃 mixins 以及如何转换现有组件。

其实 HOC 和 Vue 中的 mixins 做用是一致的，而且在早期 React 也是使用 mixins 的方式。可是在使用 class 的方式建立组件之后，mixins 的方式就不能使用了，而且其实 mixins 也是存在一些问题的，好比：

• 隐含了一些依赖，好比我在组件中写了某个 state 而且在 mixin 中使用了，就这存在了一个依赖关系。万一下次别人要移除它，就得去 mixin 中查找依赖
• 多个 mixin 中可能存在相同命名的函数，同时代码组件中也不能出现相同命名的函数，不然就是重写了，其实我一直以为命名真的是一件麻烦事。。
• 雪球效应，虽然我一个组件仍是使用着同一个 mixin，可是一个 mixin 会被多个组件使用，可能会存在需求使得 mixin 修改本来的函数或者新增更多的函数，这样可能就会产生一个维护成本

HOC 解决了这些问题，而且它们达成的效果也是一致的，同时也更加的政治正确（毕竟更加函数式了）。

组件是 React 中代码复用的基本单元。但你会发现某些模式并不适合传统组件。

例如，假设有一个 CommentList 组件，它订阅外部数据源，用以渲染评论列表：

class CommentList extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      // 假设 "DataSource" 是个全局范围内的数据源变量
      comments: DataSource.getComments()
    };
  }

  componentDidMount() {
    // 订阅更改
    DataSource.addChangeListener(this.handleChange);
  }

  componentWillUnmount() {
    // 清除订阅
    DataSource.removeChangeListener(this.handleChange);
  }

  handleChange() {
    // 当数据源更新时，更新组件状态
    this.setState({
      comments: DataSource.getComments()
    });
  }

  render() {
    return (
      <div>
        {this.state.comments.map((comment) => (
          <Comment comment={comment} key={comment.id} />
        ))}
      </div>
    );
  }
}
复制代码

稍后，编写了一个用于订阅单个博客帖子的组件，该帖子遵循相似的模式：

class BlogPost extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      blogPost: DataSource.getBlogPost(props.id)
    };
  }

  componentDidMount() {
    DataSource.addChangeListener(this.handleChange);
  }

  componentWillUnmount() {
    DataSource.removeChangeListener(this.handleChange);
  }

  handleChange() {
    this.setState({
      blogPost: DataSource.getBlogPost(this.props.id)
    });
  }

  render() {
    return <TextBlock text={this.state.blogPost} />;
  }
}
复制代码

++CommentList++ 和 ++BlogPost++ 不一样 - 它们在 ++DataSource++ 上调用不一样的方法，且渲染不一样的结果。但它们的大部分实现都是同样的：

• 在挂载时，向 DataSource 添加一个更改侦听器。
• 在侦听器内部，当数据源发生变化时，调用 setState。
• 在卸载时，删除侦听器。

你能够想象，在一个大型应用程序中，这种订阅 DataSource 和调用 setState 的模式将一次又一次地发生。咱们须要一个抽象，容许咱们在一个地方定义这个逻辑，并在许多组件之间共享它。这正是高阶组件擅长的地方。

对于订阅了 ++DataSource++ 的组件，好比 ++CommentList++ 和 ++BlogPost++，咱们能够编写一个建立组件函数。该函数将接受一个子组件做为它的其中一个参数，该子组件将订阅数据做为 ++prop++。让咱们调用函数 ++withSubscription++：

const CommentListWithSubscription = withSubscription(
  CommentList,
  (DataSource) => DataSource.getComments()
);

const BlogPostWithSubscription = withSubscription(
  BlogPost,
  (DataSource, props) => DataSource.getBlogPost(props.id)
);
复制代码

第一个参数是被包装组件。第二个参数经过 DataSource 和当前的 props 返回咱们须要的数据。

当渲染 ++CommentListWithSubscription++ 和 ++BlogPostWithSubscription++ 时， ++CommentList++ 和 ++BlogPost++ 将传递一个 ++data prop++，其中包含从 ++DataSource++ 检索到的最新数据：

// 此函数接收一个组件...
function withSubscription(WrappedComponent, selectData) {
  // ...并返回另外一个组件...
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.handleChange = this.handleChange.bind(this);
      this.state = {
        data: selectData(DataSource, props)
      };
    }

    componentDidMount() {
      // ...负责订阅相关的操做...
      DataSource.addChangeListener(this.handleChange);
    }

    componentWillUnmount() {
      DataSource.removeChangeListener(this.handleChange);
    }

    handleChange() {
      this.setState({
        data: selectData(DataSource, this.props)
      });
    }

    render() {
      // ... 并使用新数据渲染被包装的组件!
      // 请注意，咱们可能还会传递其余属性
      return <WrappedComponent data={this.state.data} {...this.props} />;
    }
  };
}
复制代码

请注意，HOC 不会修改传入的组件，也不会使用继承来复制其行为。相反，HOC 经过将组件包装在容器组件中来组成新组件。==HOC 是纯函数，没有反作用==。

被包装组件接收来自容器组件的全部 prop，同时也接收一个新的用于 render 的 data prop。HOC 不须要关心数据的使用方式或缘由，而被包装组件也不须要关心数据是怎么来的。

由于 withSubscription 是一个普通函数，你能够根据须要对参数进行增添或者删除。例如，您可能但愿使 data prop 的名称可配置，以进一步将 HOC 与包装组件隔离开来。或者你能够接受一个配置 shouldComponentUpdate 的参数，或者一个配置数据源的参数。由于 HOC 能够控制组件的定义方式，这一切都变得有可能。

与组件同样，withSubscription 和包装组件之间的契约彻底基于之间传递的 props。这种依赖方式使得替换 HOC 变得容易，只要它们为包装的组件提供相同的 prop 便可。例如你须要改用其余库来获取数据的时候，这一点就颇有用。

---

不要改变原始组件。使用组合。

不要试图在 HOC 中修改组件原型（或以其余方式改变它）。

function logProps(InputComponent) {
  InputComponent.prototype.componentWillReceiveProps = function(nextProps) {
    console.log('Current props: ', this.props);
    console.log('Next props: ', nextProps);
  };
  // 返回原始的 input 组件，暗示它已经被修改。
  return InputComponent;
}

// 每次调用 logProps 时，加强组件都会有 log 输出。
const EnhancedComponent = logProps(InputComponent);
复制代码

这样作会产生一些不良后果。其一是==输入组件再也没法像 HOC 加强以前那样使用了==。更严重的是，==若是你再用另外一个一样会修改 componentWillReceiveProps 的 HOC 加强它，那么前面的 HOC 就会失效！同时，这个 HOC 也没法应用于没有生命周期的函数组件。==

修改传入组件的 HOC 是一种糟糕的抽象方式。调用者必须知道他们是如何实现的，以免与其余 HOC 发生冲突。

HOC 不该该修改传入组件，而应该使用组合的方式，经过将组件包装在容器组件中实现功能：

function logProps(WrappedComponent) {
  return class extends React.Component {
    componentWillReceiveProps(nextProps) {
      console.log('Current props: ', this.props);
      console.log('Next props: ', nextProps);
    }
    render() {
      // 将 input 组件包装在容器中，而不对其进行修改。Good!
      return <WrappedComponent {...this.props} />;
    }
  }
}
复制代码

该 HOC 与上文中修改传入组件的 HOC 功能相同，同时避免了出现冲突的状况。它一样适用于 class 组件和函数组件。并且由于它是一个纯函数，它能够与其余 HOC 组合，甚至能够与其自身组合。

您可能已经注意到 HOC 与容器组件模式之间有类似之处。容器组件担任分离将高层和低层关注的责任，由容器管理订阅和状态，并将 prop 传递给处理渲染 UI。HOC 使用容器做为其实现的一部分，你能够将 HOC 视为参数化容器组件。

---

约定：将不相关的 props 传递给被包裹的组件

HOC 为组件添加特性。自身不该该大幅改变约定。HOC 返回的组件与原组件应保持相似的接口。

HOC 应该透传与自身无关的 props。大多数 HOC 都应该包含一个相似于下面的 render 方法：

render() {
  // 过滤掉非此 HOC 额外的 props，且不要进行透传
  const { extraProp, ...passThroughProps } = this.props;

  // 将 props 注入到被包装的组件中。
  // 一般为 state 的值或者实例方法。
  const injectedProp = someStateOrInstanceMethod;

  // 将 props 传递给被包装组件
  return (
    <WrappedComponent
      injectedProp={injectedProp}
      {...passThroughProps}
    />
  );
}
复制代码

这种约定保证了 HOC 的灵活性以及可复用性。

---

约定：最大化可组合性

并非全部的 HOC 都同样。有时候它仅接受一个参数，也就是被包裹的组件：

const NavbarWithRouter = withRouter(Navbar);
复制代码

HOC 一般能够接收多个参数。好比在 Relay 中，HOC 额外接收了一个配置对象用于指定组件的数据依赖：

const CommentWithRelay = Relay.createContainer(Comment, config);
复制代码

最多见的 HOC 签名以下：

// React Redux 的 `connect` 函数
const ConnectedComment = connect(commentSelector, commentActions)(CommentList);
复制代码

刚刚发生了什么？！若是你把它分开，就会更容易看出发生了什么。

// connect 是一个函数，它的返回值为另一个函数。
const enhance = connect(commentListSelector, commentListActions);
// 返回值为 HOC，它会返回已经链接 Redux store 的组件
const ConnectedComment = enhance(CommentList);
复制代码

换句话说，==connect 是一个返回高阶组件的高阶函数！==

这种形式可能看起来使人困惑或没必要要，但它有一个有用的属性。 像 connect 函数返回的单参数 HOC 具备签名 Component => Component。 输出类型与输入类型相同的函数很容易组合在一块儿。

// 而不是这样...
const EnhancedComponent = withRouter(connect(commentSelector)(WrappedComponent))

// ... 你能够编写组合工具函数
// compose(f, g, h) 等同于 (...args) => f(g(h(...args)))
const enhance = compose(
  // 这些都是单参数的 HOC
  withRouter,
  connect(commentSelector)
)
const EnhancedComponent = enhance(WrappedComponent)
复制代码

（一样的属性也容许 connect 和其余 HOC 承担装饰器的角色，装饰器是一个实验性的 JavaScript 提案。）

许多第三方库都提供了 compose 工具函数，包括 lodash （好比 lodash.flowRight）， Redux 和 Ramda。

---

约定：包装显示名称以便轻松调试

HOC 建立的容器组件会与任何其余组件同样，会显示在 React Developer Tools 中。为了方便调试，请选择一个显示名称，以代表它是 HOC 的产物。

最多见的方式是用 HOC 包住被包装组件的显示名称。好比高阶组件名为 withSubscription，而且被包装组件的显示名称为 CommentList，显示名称应该为 ==WithSubscription(CommentList)==：

function withSubscription(WrappedComponent) {
  class WithSubscription extends React.Component {/* ... */}
  WithSubscription.displayName = `WithSubscription(${getDisplayName(WrappedComponent)})`;
  return WithSubscription;
}

function getDisplayName(WrappedComponent) {
  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
}
复制代码

---

注意事项

高阶组件有一些须要注意的地方，对于 React 新手来讲可能并不容易发现。

不要在 render 方法中使用 HOC

React 的 diff 算法（称为协调）使用组件标识来肯定它是应该更新现有子树仍是将其丢弃并挂载新子树。 若是从 render 返回的组件与前一个渲染中的组件相同（===），则 React 经过将子树与新子树进行区分来递归更新子树。 若是它们不相等，则彻底卸载前一个子树。

一般，你不须要考虑这点。但对 HOC 来讲这一点很重要，由于这表明着你不该在组件的 render 方法中对一个组件应用 HOC：

render() {
  // 每次调用 render 函数都会建立一个新的 EnhancedComponent
  // EnhancedComponent1 !== EnhancedComponent2
  const EnhancedComponent = enhance(MyComponent);
  // 这将致使子树每次渲染都会进行卸载，和从新挂载的操做！
  return <EnhancedComponent />;
}
复制代码

这不只仅是性能问题 - 从新挂载组件会致使该组件及其全部子组件的状态丢失。

若是在组件以外建立 HOC，这样一来组件只会建立一次。所以，每次 render 时都会是同一个组件。通常来讲，这跟你的预期表现是一致的。

在极少数状况下，你须要动态调用 HOC。你能够在组件的生命周期方法或其构造函数中进行调用。

务必复制静态方法

有时在 React 组件上定义静态方法颇有用。例如，Relay 容器暴露了一个静态方法 getFragment 以方便组合 GraphQL 片断。

可是，当你将 HOC 应用于组件时，原始组件将使用容器组件进行包装。这意味着新组件没有原始组件的任何静态方法。

// 定义静态函数
WrappedComponent.staticMethod = function() {/*...*/}
// 如今使用 HOC
const EnhancedComponent = enhance(WrappedComponent);

// 加强组件没有 staticMethod
typeof EnhancedComponent.staticMethod === 'undefined' // true
复制代码

为了解决这个问题，你能够在返回以前把这些方法拷贝到容器组件上：

function enhance(WrappedComponent) {
  class Enhance extends React.Component {/*...*/}
  // 必须准确知道应该拷贝哪些方法 :(
  Enhance.staticMethod = WrappedComponent.staticMethod;
  return Enhance;
}
复制代码

但要这样作，你须要知道哪些方法应该被拷贝。你可使用 hoist-non-react-statics 自动拷贝全部非 React 静态方法:

import hoistNonReactStatic from 'hoist-non-react-statics';
function enhance(WrappedComponent) {
  class Enhance extends React.Component {/*...*/}
  hoistNonReactStatic(Enhance, WrappedComponent);
  return Enhance;
}
复制代码

除了导出组件，另外一个可行的方案是再额外导出这个静态方法。

// 使用这种方式代替...
MyComponent.someFunction = someFunction;
export default MyComponent;

// ...单独导出该方法...
export { someFunction };

// ...并在要使用的组件中，import 它们
import MyComponent, { someFunction } from './MyComponent.js';
复制代码

Refs 不会被传递

虽然高阶组件的约定是将全部 props 传递给被包装组件，但这对于 refs 并不适用。那是由于 ref 实际上并非一个 prop - 就像 key 同样，它是由 React 专门处理的。若是将 ref 添加到 HOC 的返回组件中，则 ref 引用指向容器组件，而不是被包装组件。

这个问题的解决方案是经过使用 React.forwardRef API（React 16.3 中引入）。前往 ref 转发章节了解更多。

---

HOC的实际应用

日志打点

可用、权限控制

双向绑定

在vue中，绑定一个变量后可实现双向数据绑定，即表单中的值改变后绑定的变量也会自动改变。而React中没有作这样的处理，在默认状况下，表单元素都是非受控组件。给表单元素绑定一个状态后，每每须要手动书写onChange方法来将其改写为受控组件，在表单元素很是多的状况下这些重复操做是很是痛苦的。 咱们能够借助高阶组件来实现一个简单的双向绑定，代码略长，能够结合下面的思惟导图进行理解。

表单校验

---

总结

高阶组件是属于 React 高级运用，可是实际上是一个很简单的概念，可是它很是实用。在实际的业务场景中，灵活合理的使用高阶组件，能够提升代码的复用性和灵活性。

对高阶组件，咱们能够总结如下几点：

• 高阶组件是一个函数，而不是组件
• 组件是把 props 转化成 UI，高阶组件是把一个组件转化成另外一个组件
• 高阶组件的做用是复用代码
• 高阶组件对应设计模式里的==装饰者模式==