当前位置：首页 > React

你是如何划分React组件的

2026-01-26 01:11:48React

划分React组件的常见方法

按功能职责划分
将组件分为容器组件（Container Components）和展示组件（Presentational Components）。容器组件负责处理业务逻辑和数据管理，展示组件仅负责UI渲染。例如：UserListContainer处理数据获取，UserList只渲染列表。

按业务模块划分
根据应用的功能模块拆分组件。例如电商应用可分为ProductCard、ShoppingCart、CheckoutForm等，每个组件对应一个明确的业务场景。

按复用性划分
将可复用的UI元素抽象为独立组件。例如按钮、输入框、模态框等基础UI组件，或业务中高频复用的组件如AddressPicker。

按层级结构划分
根据页面层级组织组件。例如Header、Sidebar、MainContent等布局组件，或嵌套的子组件如DropdownMenu包含MenuItem。

技术驱动划分

你是如何划分React组件的

HOC或自定义Hook：将共享逻辑提取为高阶组件或Hook（如useAuth）。
Error Boundary：错误边界组件单独划分以捕获子组件异常。
Context Provider：状态管理相关的Provider组件独立维护。

划分原则

单一职责：每个组件只解决一个问题。
低耦合：减少组件间依赖，通过props交互。
高内聚：相关代码（样式、逻辑）集中在一个组件内。
适度粒度：避免过度拆分导致维护成本增加。

示例代码结构

// 按功能职责划分示例
const UserList = ({ users }) => ( 
  <ul>{users.map(user => <li key={user.id}>{user.name}</li>)}</ul> 
);

const UserListContainer = () => {
  const [users, setUsers] = useState([]);
  useEffect(() => { fetchUsers().then(setUsers); }, []);
  return <UserList users={users} />;
};