React 高级组件实现类组件的继承与复用

在 React 中，函数组件本身并不支持“继承”的概念，因为函数组件是纯粹的函数，它们没有像类组件那样的继承机制。不过，你可以通过组合（Composition）和钩子（Hooks）来实现类似的功能。

以下是一些常见的方法来在函数组件中实现“继承”或代码复用：

1. 使用高阶组件（Higher-Order Components, HOCs）

高阶组件是一个函数，它接收一个组件并返回一个新的组件。你可以使用 HOC 来封装和复用逻辑。

// 高阶组件
function withExtraProps(WrappedComponent) {
  return function EnhancedComponent(props) {
    const extraProps = {
      someValue: 'Hello from HOC!',
    };
    return <WrappedComponent {...props} {...extraProps} />;
  };
}

// 原始组件
function MyComponent(props) {
  return <div>{props.someValue}</div>;
}

// 使用高阶组件
const MyEnhancedComponent = withExtraProps(MyComponent);

function App() {
  return <MyEnhancedComponent />;
}

export default App;

2. 使用自定义钩子（Custom Hooks）

自定义钩子可以让你在函数组件中复用逻辑，而不需要通过组件继承。

// 自定义钩子
function useCustomHook() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return { count, increment };
}

// 使用自定义钩子的组件
function MyComponent() {
  const { count, increment } = useCustomHook();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

function App() {
  return <MyComponent />;
}

export default App;

3. 使用组件组合（Component Composition）

你可以通过嵌套组件来实现组合，从而复用代码和逻辑。

// 可复用的子组件
function Header({ title }) {
  return <h1>{title}</h1>;
}

// 原始组件
function MyComponent({ children }) {
  return (
    <div>
      <Header title="My Component Title" />
      {children}
    </div>
  );
}

// 使用组件组合的父组件
function App() {
  return (
    <MyComponent>
      <p>This is the content of MyComponent.</p>
    </MyComponent>
  );
}

export default App;

总结

虽然函数组件不支持继承，但通过高阶组件、自定义钩子和组件组合等方法，你可以实现代码复用和逻辑封装。这些方法不仅灵活，而且更符合 React 的函数式编程风格。