Skip to content

高阶组件

· 10 min

2. 高阶组件#

高阶组件英语全称为 Higher-Order Components，简称 HOC，所谓高阶组件，是 React 中一种复用逻辑的技巧。

高阶组件的学习，主要有下面 2 个点：

高阶组件是一个函数#

这个点非常有意思，很多人一看到这个名字，自然的会认为高阶组件是一个组件，但是往往有些名字具有欺骗性，就像 JavaScript 会被误认为和 Java 相关一样。

官方对高阶组件给出了很明确的定义，甚至还给了一个公式：

高阶组件是参数为组件，返回值为新组件的函数。

const EnhancedComponent = higherOrderComponent(WrappedComponent)

高阶组件要做的事情#

高阶组件作为一个函数，接收你传入的组件，然后又返回一个新组件给你，那你猜都猜得到在高阶组件的内部肯定是对你原有的组件做了一些增强操作，然后为你返回的是增强后的组件。

那什么又叫做对组件公共逻辑进行横向抽离呢？看下图：

image-20221130134931021

假设我们这里有三个组件，每个组件有一部分公共逻辑，一部分该组件自身的业务逻辑，那么很明显每个组件都书写一遍这样的公共逻辑是不划算的。

作为一个程序员，我们自然而然想到的就是将这部分公共逻辑提取出来。

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

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

眼熟不？没错，在 Vue2.x 中也支持 mixins 这样的混合注入。

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

mixins 问题

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

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

  • mixins 引起名称冲突

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

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

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

关于 mixin 的讨论，可以参阅官方文档：https://zh-hans.reactjs.org/blog/2016/07/13/mixins-considered-harmful.html

之后 React 推出了高阶组件的抽离方式，如下图所示：

image-20221130134950363

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

下面是一个具体的示例：

import React from 'react'


function ChildCom1(props) {
  return <div>子组件1 姓名：{props.name}</div>
}


export default ChildCom1
import React from 'react'


function ChildCom2(props) {
  return <div>子组件2 年龄：{props.age}</div>
}


export default ChildCom2

上面的代码中，我们有两个子组件，父组件在使用这两个子组件时，一个需要传入 name，另一个需要传入 age

正常来讲，父组件使用子组件的方式如下：

<ChildCom1 name="xiejie"/>
<ChildCom2 age={18}/>

但是现在我们新增了一个需求，那就是每个子组件需要记录创建和销毁时的日志。很显然，对于每个子组件来讲，日志相关的逻辑都是相同的，也就算是公共逻辑，没有必要在每个组件中引入一份，因此这里我们来使用 HOC 的方式抽离这一段公共逻辑，如下：

import { useEffect } from 'react'
import { formatDate } from '../utils/tools'


// 高阶组件是一个函数，接收一个组件作为参数
// 返回一个新的组件
function withLog(Com) {
  // 返回的新组件
  return function NewCom(props) {
    // 抽离的公共逻辑
    useEffect(() => {
      console.log(
        `日志：组件${Com.name}已经创建，创建时间${formatDate(Date.now(), 'year-time')}`
      )
      return function () {
        console.log(
          `日志：组件${Com.name}已经销毁，销毁时间${formatDate(Date.now(), 'year-time')}`
        )
      }
    }, [])
    // 一般来讲，传入的组件会作为新组件的视图
    return <Com {...props} />
  }
}


export default withLog

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

有了这个高阶组件后，我们就可以对原有的子组件进行加强，如下：

import ChildCom1 from './components/ChildCom1'
import ChildCom2 from './components/ChildCom2'
import withLog from './HOC/withLog'
import { useState } from 'react'


// 对原有的子组件进行加强操作
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

实际效果如下：

iShot_2022-11-25_15.45.33

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

import { useState, useEffect } from 'react'


// 高阶组件是一个函数，接收一个组件作为参数
// 返回一个新的组件
function withTimer(Com) {
  // 返回的新组件
  return function NewCom(props) {
    // 抽离的公共逻辑
    const [counter, setCounter] = useState(1)


    useEffect(() => {
      const stopTimer = setInterval(() => {
        console.log(counter)
        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)

https://react-redux.js.org/api/connect#connect-returns

不过有意思的是，如果你查阅官网，会发现官网给的示例基本都是类组件的示例。

https://zh-hans.reactjs.org/docs/higher-order-components.html

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

因此你在 react-redux 官网也能看到这样一句话：

image-20221130135117223

-EOF-