共享逻辑的组件设计模式

2024-02-18 05:59:01

在 React 中共享组件逻辑：三种行之有效的方法

引言

React 是一个强大的 JavaScript 库，用于构建交互式用户界面。其组件化架构允许开发人员创建可重用的代码块，从而加快应用程序开发速度。然而，有时需要在多个组件之间共享逻辑。本文将探讨在 React 中共享组件逻辑的三种有效方法 ：render props、高阶组件和自定义 Hook。

三种共享组件逻辑的方法

1. Render Props

render props 是一种简单的技术，允许一个组件将它的渲染逻辑传递给另一个组件。这通过将渲染函数作为 prop 传递给子组件来实现。

例子：

const LoadingIndicator = ({ isLoading }) => {
  if (isLoading) {
    return <div>Loading...</div>;
  }
  return null;
};

const MyComponent = () => {
  const [isLoading, setIsLoading] = useState(true);

  return (
    <div>
      <LoadingIndicator isLoading={isLoading} />
      <button onClick={() => setIsLoading(false)}>Load Data</button>
    </div>
  );
};

优点：

简单易用
提供对子组件渲染逻辑的完全控制

缺点：

嵌套组件过多时，可读性差
难以共享复杂的逻辑

2. 高阶组件（HOC）

高阶组件（HOC） 是一种函数，它接收一个组件并返回一个新的组件。新组件继承了原组件的所有功能，并添加了 HOC 添加的额外功能。

例子：

const withLoadingIndicator = (Component) => {
  return (props) => {
    const [isLoading, setIsLoading] = useState(true);
    return (
      <div>
        <Component {...props} isLoading={isLoading} />
        <LoadingIndicator isLoading={isLoading} />
      </div>
    );
  };
};

const MyComponentWithLoadingIndicator = withLoadingIndicator(MyComponent);

优点：

提供组件复用
在组件层次结构中注入附加逻辑

缺点：

可读性差
难以调试

3. 自定义 Hook

自定义 Hook 是 React Hook 的一种扩展，允许开发人员创建自己的 Hook。Hook 是函数，可以访问组件的状态和生命周期方法。

例子：

import { useState } from "react";

const useLoadingIndicator = () => {
  const [isLoading, setIsLoading] = useState(true);
  return { isLoading, setIsLoading };
};

const MyComponent = () => {
  const { isLoading, setIsLoading } = useLoadingIndicator();

  return (
    <div>
      <h1>My Component</h1>
      <button onClick={() => setIsLoading(false)}>Load Data</button>
    </div>
  );
};