当前位置：首页 > React

react实现组件复用

2026-01-26 22:50:50React

React 组件复用的常见方法

高阶组件 (HOC)
通过函数接受一个组件并返回一个新组件的方式实现逻辑复用。例如，一个日志记录的高阶组件可以这样实现：

function withLogging(WrappedComponent) {
  return function(props) {
    console.log('Rendered:', WrappedComponent.name);
    return <WrappedComponent {...props} />;
  };
}
const EnhancedComponent = withLogging(MyComponent);

自定义 Hook
将可复用的状态逻辑提取到自定义 Hook 中。例如，一个控制表单输入的 Hook：

react实现组件复用

function useFormInput(initialValue) {
  const [value, setValue] = useState(initialValue);
  const handleChange = (e) => setValue(e.target.value);
  return { value, onChange: handleChange };
}
// 使用
const nameInput = useFormInput('');

Render Props
通过组件的 children 或特定 prop 传递渲染逻辑。例如：

react实现组件复用

<DataProvider render={data => <ChildComponent data={data} />} />

组件组合 (Composition)
通过 props.children 或显式插槽实现内容分发：

function Card({ header, children }) {
  return (
    <div className="card">
      <div className="header">{header}</div>
      <div className="body">{children}</div>
    </div>
  );
}

方法对比与选择建议

HOC 适合横切关注点（如权限控制），但可能造成 props 命名冲突
Hook 是 React 16.8+ 的推荐方式，能解决 HOC 的嵌套问题
Render Props 灵活但可能导致嵌套过深
组合模式 适合 UI 层面的复用，保持组件层次清晰

最佳实践

优先使用自定义 Hook 处理状态逻辑
简单 UI 复用使用组合模式
复杂场景可组合使用多种模式
避免过度抽象，在重复代码出现三次以上再考虑复用

对于 TypeScript 项目，需要为高阶组件或 Hook 添加泛型类型支持：

function withLoading<T>(Component: React.ComponentType<T>) {
  return (props: T & { isLoading: boolean }) => (
    isLoading ? <Spinner /> : <Component {...props} />
  );
}