React 代码复用：高阶组件与 Render Props

2023-09-21 21:39:16

React：巧用高阶组件(HOC)与 Render Props，助力代码复用！

引言

在 React 生态系统中，代码复用是一个至关重要的概念。它使我们能够在应用程序的不同部分使用相同的逻辑，从而减少代码冗余并提高可维护性。实现代码复用的两种常用方法是高阶组件(HOC)和 Render Props。本文将深入探讨这两种方法，阐明它们的优势和适用场景。

高阶组件(HOC)

高阶组件是一种函数，它接受一个组件作为参数并返回一个新的组件。新的组件包含原始组件的全部功能，但增强了额外的逻辑。例如，我们可以创建一个 withLogging HOC，它将 console.log() 语句添加到组件的生命周期方法中，以方便调试。

const withLogging = (WrappedComponent) => {
  return class WithLogging extends React.Component {
    componentDidMount() {
      console.log('Component mounted');
    }
    ...
  };
};

通过这种方式，我们可以轻松地将日志记录功能添加到任何组件，而无需修改其源代码：

const LoggedButton = withLogging(Button);

Render Props

Render Props 是一种设计模式，它允许父组件将渲染逻辑传递给子组件。父组件将一个函数作为 props 传递给子组件，该函数负责渲染子组件的内容。例如，我们可以创建一个 renderCounter Render Prop，它允许父组件控制计数器的显示方式：

const renderCounter = ({ count }) => {
  return <h1>Current count: {count}</h1>;
};

const Counter = ({ render }) => {
  const [count, setCount] = useState(0);
  return render({ count, setCount });
};