当前位置：首页 > React

react如何封装

2026-02-25 22:50:35React

封装组件的基本方法

在React中封装组件通常遵循单一职责原则，确保每个组件只负责一个特定功能。将UI和逻辑分离，通过props传递数据和回调函数。

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

使用自定义Hooks封装逻辑

将可复用的状态逻辑提取到自定义Hook中，实现逻辑与UI的解耦。自定义Hook必须以"use"开头命名。

const useCounter = (initialValue = 0) => {
  const [count, setCount] = useState(initialValue);
  const increment = () => setCount(count + 1);
  return { count, increment };
};

高阶组件封装

通过高阶组件(HOC)模式增强现有组件功能。HOC是一个接收组件并返回新组件的函数。

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

复合组件模式

使用React Context和复合组件模式封装具有复杂交互的组件族，对外暴露简洁的API。

const Tabs = ({ children }) => {
  const [activeTab, setActiveTab] = useState(0);
  return (
    <TabContext.Provider value={{ activeTab, setActiveTab }}>
      {children}
    </TabContext.Provider>
  );
};

类型检查与默认值

使用PropTypes或TypeScript定义组件接口，明确props类型要求并设置默认值。

import PropTypes from 'prop-types';

Card.propTypes = {
  title: PropTypes.string.isRequired,
  size: PropTypes.oneOf(['sm', 'md', 'lg']),
};

Card.defaultProps = {
  size: 'md',
};

样式封装方案

采用CSS Modules、Styled-components或Emotion等方案实现样式封装，避免全局污染。

import styles from './Button.module.css';

const Button = () => {
  return <button className={styles.primary}>Submit</button>;
};

性能优化封装

使用React.memo、useMemo和useCallback优化组件性能，避免不必要的重新渲染。

const MemoizedComponent = React.memo(({ list }) => {
  return <ul>{list.map(item => <li key={item.id}>{item.text}</li>)}</ul>;
});

组件文档规范

为封装组件编写清晰的文档说明，包括props定义、使用示例和注意事项。

## Button

A reusable button component.

### Props
- `variant`: 'primary' | 'secondary'
- `size`: 'small' | 'medium' | 'large'
- `onClick`: () => void

react如何封装