react如何划分组件
划分React组件的原则
React组件的划分应遵循高内聚、低耦合的原则。高内聚指组件内部功能紧密相关，低耦合指组件间依赖关系尽可能少。合理的组件划分能提升代码可维护性和复用性。
按功能职责划分
将UI拆分为独立功能的组件。例如，一个电商页面可分为Header、ProductList、ShoppingCart等组件。每个组件负责特定功能，Header处理导航，ProductList展示商品，ShoppingCart管理购物车状态。
按UI层级划分
根据视觉层级拆分组件。例如，Modal组件可拆分为Backdrop、Content、CloseButton等子组件。这种划分方式与设计稿的层级结构高度对应，便于协作开发。
容器组件与展示组件
容器组件负责数据获取和状态管理，展示组件专注于UI渲染。例如，UserListContainer获取用户数据，UserList仅负责渲染用户列表。这种模式使组件职责更清晰。
复合组件模式
通过组合多个小组件构建复杂功能。例如，Dropdown组件可由Trigger、Menu、MenuItem等组成。复合组件提供灵活的组合方式，同时保持子组件的独立性。
代码拆分边界
根据路由或功能模块拆分组件。使用React.lazy实现按需加载：
const LazyComponent = React.lazy(() => import('./LazyComponent'));这种方式优化应用性能，特别适用于大型项目。
状态管理考量
将需要共享状态的组件提升到共同父组件中。当状态跨多个组件时，考虑使用Context或状态管理库。避免过度提升状态导致组件树复杂化。
组件复用评估
识别可复用的UI模式，将其抽象为独立组件。例如，Button、Input等基础UI元素应设计为无状态组件，通过props定制行为。复用性高的组件应放在共享目录中。
测试驱动划分
从测试角度评估组件划分。理想情况下，单个组件应易于独立测试。如果测试时需要过多mock依赖，可能说明组件边界不合理。
渐进式拆分策略
初期可从大组件开始，随着功能复杂再逐步拆分。过度设计会导致大量微小组件，增加维护成本。平衡拆分粒度与开发效率是关键。
