React 中高阶组件的使用及最佳实践-FunTeaLearn Online Web Tutorials

React 中的高阶组件（Higher-Order Component，HOC）是一种基于组合的设计模式，它可以让组件的复用和逻辑的复用更加方便和灵活。在本文中，我们将探讨 React 中高阶组件的使用及最佳实践。

什么是高阶组件

高阶组件是一个函数，它接收一个组件作为参数，并返回一个新的组件。新的组件具有了原始组件的所有特性，同时还可以添加一些新的特性或功能。

高阶组件通常用于以下场景：

代码复用：当多个组件有相似的逻辑时，可以将这些逻辑提取到一个高阶组件中，以实现代码复用。
渲染劫持：当需要在组件渲染前或渲染后执行一些操作时，可以使用高阶组件来实现渲染劫持。
条件渲染：当需要根据某些条件动态渲染组件时，可以使用高阶组件来实现条件渲染。

高阶组件的实现方式

高阶组件可以使用函数或类来实现。下面分别介绍这两种实现方式。

函数实现高阶组件

函数实现高阶组件的基本结构如下：

function withSomeFeature(WrappedComponent) {
  return function WithSomeFeature(props) {
    // do something before rendering WrappedComponent
    return <WrappedComponent {...props} />;
  };
}

该函数接收一个组件作为参数 WrappedComponent，并返回一个新的组件 WithSomeFeature。在返回的组件中，可以在渲染 WrappedComponent 前或渲染后执行一些操作。

例如，我们可以定义一个高阶组件 withLogger，它可以在控制台中打印组件的名称和 props：

function withLogger(WrappedComponent) {
  return function WithLogger(props) {
    console.log(`Render ${WrappedComponent.displayName || WrappedComponent.name} with props:`, props);
    return <WrappedComponent {...props} />;
  };
}

使用该高阶组件时，只需要将组件作为参数传递给 withLogger 函数即可：

const MyComponentWithLogger = withLogger(MyComponent);

类实现高阶组件

类实现高阶组件的基本结构如下：

class WithSomeFeature extends React.Component {
  render() {
    // do something before rendering this.props.children
    return <>{this.props.children}</>;
  }
}

该类继承自 React.Component，并在 render 方法中执行一些操作。使用该高阶组件时，只需要将需要增加特性的组件作为 WithSomeFeature 的子组件即可：

<WithSomeFeature>
  <MyComponent />
</WithSomeFeature>

高阶组件的最佳实践

显式包裹 display name

在使用高阶组件时，React DevTools 可能会显示一些奇怪的组件名称，这是因为高阶组件返回的组件没有显式地设置 displayName 属性。为了解决这个问题，我们可以在高阶组件中显式地包裹 displayName：

function withSomeFeature(WrappedComponent) {
  function WithSomeFeature(props) {
    // do something before rendering WrappedComponent
    return <WrappedComponent {...props} />;
  }
  WithSomeFeature.displayName = `WithSomeFeature(${WrappedComponent.displayName || WrappedComponent.name})`;
  return WithSomeFeature;
}

不要修改原始组件

高阶组件不应该修改原始组件，而应该返回一个新的组件。这样可以保证原始组件的行为不会受到影响，并且可以让代码更加清晰和可维护。

传递所有 props

在高阶组件中，应该将所有传递给新组件的 props 都传递给原始组件。这可以通过使用展开运算符来实现：

function withSomeFeature(WrappedComponent) {
  function WithSomeFeature(props) {
    // do something before rendering WrappedComponent
    return <WrappedComponent {...props} />;
  }
  WithSomeFeature.displayName = `WithSomeFeature(${WrappedComponent.displayName || WrappedComponent.name})`;
  return WithSomeFeature;
}

避免嵌套过深

在使用高阶组件时，应该避免嵌套过深。过多的嵌套会使代码变得难以理解和维护，而且会降低性能。

使用 compose 函数

当需要使用多个高阶组件时，可以使用 compose 函数来将它们组合起来。compose 函数接收多个函数作为参数，并返回一个新的函数，新函数将这些函数从右到左依次执行，并返回最终的结果。

例如，我们可以使用 compose 函数来组合多个高阶组件：

-- -------------------- ---- -------
------ - ------- - ---- --------

----- ------- - --------
  -----------
  ----------------
  -------------------
--

----- ------------------- - ---------------------

示例代码

以下是一个使用高阶组件实现条件渲染的示例代码：

-- -------------------- ---- -------
-------- --------------------------------------- ---------- -
  -------- ---------------------------- -
    -- ------------------- -
      ------ -----
    -
    ------ ----------------- ---------- ---
  -
  --------------------------------- - ----------------------------------------------------- -- -------------------------
  ------ ----------------------
-

-------- ------------------ -
  ------ ------------------------
-

----- -------------------------------- - ---------------------------------- ------- -- ---------- --- ----

-------- ----- -
  ------ -
    -----
      --------------------------------- ------- --
      --------------------------------- ------------ ------- --
    ------
  --
-

在这个例子中，我们定义了一个高阶组件 withConditionalRender，它接收一个组件和一个条件函数作为参数，并返回一个新的组件。新的组件会根据条件函数的返回值来判断是否渲染原始组件。

我们使用 withConditionalRender 来实现了一个简单的条件渲染：当 MyComponent 的 text 属性为空时，不渲染组件，否则渲染组件。在 App 组件中，我们分别使用 MyComponentWithConditionalRender 来渲染 MyComponent 组件，以达到条件渲染的效果。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d95a71a941bf71340f16d3

React 中高阶组件的使用及最佳实践