Skip to main content

HOC

HOC​

HOC 全称为 Higher-Order Components，即高阶组件，是 React 中一种重用组件逻辑的高级技术。

HOC 并不严格属于 React API，而是从 React 的组合特性中产生的一种模式。

HOC 件并非一个组件，而是增强组件功能的一个函数，其作用是对多个组件的公共逻辑进行横向抽离。

函数​

高阶组件是一个参数为组件，且返回值为新组件的函数，而并非是一个 React 组件。

const EnhancedComponent = higherOrderComponent(WrappedComponent);

横行抽离​

高阶组件作为一个函数，接收传入的组件，然后返回一个新组件，因此在高阶组件的内部肯定对原有的组件做了一些增强操作，然后返回增强后的组件。

HOC
图-1

如图-1，假设有三个组件，每个组件有一部分公共逻辑，一部分该组件自身的业务逻辑，可以看到每个组件都书写一遍这样的公共逻辑是非常冗余的，而且是不划算的，因此能想到的就是将公共逻辑提取出来。

早期的 React 采用的是 Mixins 来解决这种横切关注点相关的问题。Mixins 的原理可以简单理解为将一个 mixin 对象上的方法增加到组件上。

const mixinDefaultProps = {}
const ExampleComponent = React.createClasss({
  mixins: [mixinDefaultProps],
  render: function(){}
})

不过这只能在 React 的旧语法 React.createClasss 中使用，目前已经不再推荐使用了。

note

mixins 问题：

  • mixins 引入了隐式的依赖关系

你可能会写一个有状态的组件，然后你的同事可能添加一个读取这个组件 state 的 mixin。几个月之后，你可能希望将该 state 移动到父组件，以便与其兄弟组件共享。你会记得更新这个 mixin 来读取 props 而不是 state 吗？如果此时，其它组件也在使用这个 mixin 呢？

  • mixins 引起名称冲突

无法保证两个特定的 mixin 可以一起使用。例如，如果 FluxListenerMixin 和 WindowSizeMixin 都定义来 handleChange( )，则不能一起使用它们。同时，你也无法在自己的组件上定义具有此名称的方法。

  • mixins 导致滚雪球式的复杂性

每一个新的需求都使 mixins 更难理解。使用相同 mixin 的组件会随着时间的推移变得越来越耦合。任何新功能都可以使用 mixins 添加到所有组件中。渐渐地，封装边界被侵蚀了，由于很难更改或删除现有的 mixins，它们变得越来越抽象，直到没有人理解它们是如何工作的。

之后 React 推出了高阶组件的抽离方式：

HOC
图-2

在高阶组件中，接收一个组件作为参数，然后在高阶组件中会返回一个新组件，新组件中会将公共逻辑附加上去，传入的组件一般作为新组件的视图。

import { useState } from "react"
import ChildCom1 from "./ChildCom1"
import ChildCom2 from "./ChildCom2"
import withLog from "./withLog"

const WrapChild1 = withLog(ChildCom1);
const WrapChild2 = withLog(ChildCom2);

function App() {
  const [toggle, setToggle] = useState(true);
  const child = toggle ? 
    <WrapChild1 name="xiejie" /> 
    : <WrapChild2 age={18} />

  return (
    <div>
      <button onClick={() => setToggle(!toggle)}>show/hide</button>
      {child}
    </div>
  );
}

export default App;

在高阶组件中，返回的新组件在接受了 props 后，一般需要原封不动的传递给原来的组件。

嵌套​

高阶组件还可以进行嵌套操作，比如有两段公共逻辑，但是这两段公共逻辑写在一个高阶组件中又不太合适，因此可以拆分成两个高阶组件：

import { useState, useEffect } from "react";

function withTimer(Com) {
  return function NewCom(props) {
    const [counter, setCounter] = useState(1);

    useEffect(() => {
      const stopTimer = setInterval(() => {
        setCounter(counter + 1);
      }, 1000);
      return function () {
        clearInterval(stopTimer);
      };
    });

    return <Com {...props} />;
  };
}

export default withTimer;

之后在使用高阶组件时，就可以采取嵌套的方式来使用：

const WrapChild1 = withTimer(withLog(ChildCom1));
const WrapChild2 = withTimer(withLog(ChildCom2));

应用​

高阶组件的出现，解决了组件之间如何横向抽离公共逻辑的问题，很多第三方库中都可以见到高阶组件的身影。

例如在 react-redux 中的 connect 用法，这里 connect 返回的就是一个高阶组件，之后开发者可以传入自己的组件进行组件强化。

connect()(MyComponent)
connect(mapState)(MyComponent)
connect(mapState, null, mergeProps, options)(MyComponent)

HOC 实际上就是为了解决早期类组件的公共逻辑抽离的问题，那个时候在 React 中类组件占主流。但是随着 Hook 的出现，函数组件开始占主流，React 开发的思想也从面向对象转为了函数式编程，抽离公共逻辑也能够非常简单的使用自定义 Hook 来实现了。

Last updated on