当前位置：首页 > React

如何提升react组件复用性

2026-01-25 09:40:51React

使用自定义Hooks封装逻辑

将组件中的状态逻辑提取到自定义Hooks中，例如表单处理、数据获取等。自定义Hooks可以独立于UI组件存在，方便在不同组件间共享逻辑。

function useForm(initialValues) {
  const [values, setValues] = useState(initialValues);

  const handleChange = (e) => {
    setValues({
      ...values,
      [e.target.name]: e.target.value
    });
  };

  return [values, handleChange];
}

采用组合模式而非继承

通过children prop或render props模式组合组件，避免使用类继承。React官方推荐组合方式实现代码复用，这种方式更灵活且易于维护。

function Card({ title, children }) {
  return (
    <div className="card">
      <h3>{title}</h3>
      <div className="content">{children}</div>
    </div>
  );
}

设计通用高阶组件

创建可复用的高阶组件(HOC)包装基础功能，如加载状态、错误处理等。高阶组件可以增强现有组件而不修改其原始实现。

function withLoading(Component) {
  return function WrappedComponent({ isLoading, ...props }) {
    return isLoading ? <Spinner /> : <Component {...props} />;
  };
}

合理拆分组件职责

将大型组件拆分为更小的单一职责组件。每个小组件只关注特定功能，更容易被复用。控制组件体积，保持功能聚焦。

使用Context共享全局状态

对于需要在多层级组件间共享的状态，使用React Context避免prop drilling问题。Context提供了一种跨组件树共享值的方式。

const ThemeContext = createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

标准化组件接口

定义一致的props命名规范和类型检查，使用PropTypes或TypeScript确保组件接口清晰可预测。良好的接口设计能提升组件的可理解性和复用性。

Button.propTypes = {
  size: PropTypes.oneOf(['small', 'medium', 'large']),
  variant: PropTypes.oneOf(['primary', 'secondary']),
  onClick: PropTypes.func.isRequired
};