当前位置：首页 > React

react函数组件如何混合

2026-01-25 00:54:27React

混合 React 函数组件的方法

在 React 中，函数组件可以通过组合、高阶组件（HOC）、自定义 Hook 或 Render Props 等方式实现混合功能。以下是几种常见的方法：

使用自定义 Hook 共享逻辑

自定义 Hook 是一种将组件逻辑提取到可重用函数中的方式。通过自定义 Hook，可以在多个组件之间共享状态逻辑。

import { useState, useEffect } from 'react';

function useCounter(initialValue) {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return { count, increment, decrement };
}

function ComponentA() {
  const { count, increment } = useCounter(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

function ComponentB() {
  const { count, decrement } = useCounter(10);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

使用高阶组件（HOC）增强功能

高阶组件是一个函数，接收一个组件并返回一个新的组件。通过 HOC 可以为组件添加额外的功能或属性。

function withLogger(WrappedComponent) {
  return function(props) {
    useEffect(() => {
      console.log('Component mounted');
      return () => console.log('Component unmounted');
    }, []);

    return <WrappedComponent {...props} />;
  };
}

const EnhancedComponent = withLogger(ComponentA);

使用 Render Props 共享状态

Render Props 是一种通过组件属性传递渲染逻辑的技术。通过 Render Props，可以将组件的状态或行为共享给其他组件。

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

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return render({ count, increment, decrement });
}

function DisplayCounter() {
  return (
    <Counter
      render={({ count, increment }) => (
        <div>
          <p>Count: {count}</p>
          <button onClick={increment}>Increment</button>
        </div>
      )}
    />
  );
}

组合多个组件

通过组合多个子组件，可以将功能拆分为更小的单元，然后在父组件中组合使用。

function Button({ onClick, children }) {
  return <button onClick={onClick}>{children}</button>;
}

function Display({ value }) {
  return <p>Value: {value}</p>;
}

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <Display value={count} />
      <Button onClick={() => setCount(count + 1)}>Increment</Button>
    </div>
  );
}