React 组合代替继承实现组件逻辑复用

前端

2023-10-20 03:43:15

React 中组合代替继承的优势

在 React 中使用组合代替继承具有以下几个优势：

提高组件的独立性和可重用性。 组合可以使组件更独立，更容易在不同的项目中重用。因为组合不会修改组件本身，而是通过组合的方式将新的功能添加到组件中。
提高代码的可读性和可维护性。 组合可以使代码更易于阅读和维护。因为组合不会改变组件的结构，而是通过组合的方式将新的功能添加到组件中，使得代码结构更清晰。
减少组件的耦合度。 组合可以减少组件之间的耦合度。因为组合不会改变组件本身，而是通过组合的方式将新的功能添加到组件中，使得组件之间不会相互影响。

React 中使用组合实现组件逻辑复用

在 React 中可以使用多种方式来实现组件的逻辑复用，其中一种常用的方式是使用高阶组件（HOC）。

高阶组件（HOC）

HOC 是一种函数，该函数接受一个组件作为参数，并返回一个新的组件。新组件包含原组件的所有功能，并添加了新的功能。HOC 非常适合用来实现组件的逻辑复用，因为 HOC 可以将一些公共的逻辑从多个组件中提取出来，并封装成一个单独的组件。

使用 HOC 实现组件逻辑复用的示例

下面是一个使用 HOC 实现组件逻辑复用的示例。在这个示例中，我们创建一个 HOC 来统计组件的点击次数。

import React, { useState } from 'react';

// 定义 HOC
const withCounter = (WrappedComponent) => {
  return (props) => {
    const [count, setCount] = useState(0);

    // 在组件每次渲染时更新计数
    useEffect(() => {
      setCount(count + 1);
    }, []);

    return (
      <WrappedComponent {...props} count={count} />
    );
  };
};

// 使用 HOC
const Button = (props) => {
  return (
    <button onClick={props.onClick}>
      {props.count}
    </button>
  );
};

const CountedButton = withCounter(Button);

export default CountedButton;