react组件如何拆分
拆分React组件的原则与方法
单一职责原则 每个组件应只负责一个功能或展示一块内容。避免将过多逻辑或UI集中在一个组件中，保持高内聚低耦合。例如表单验证和表单渲染应拆分为不同组件。
按功能或领域拆分 将相关功能归类到同一组件中。例如用户资料卡片、订单列表、导航菜单等各自独立成组件。领域驱动设计（DDD）可帮助识别边界。
UI与逻辑分离 容器组件（Container Components）负责数据获取和状态管理，展示组件（Presentational Components）只处理UI渲染。例如Redux的connect组件与纯函数组件分离。
复用性评估 可复用的部分如按钮、输入框、模态窗等应拆分为独立组件。通过props定制不同场景下的行为，避免重复代码。
具体拆分技巧
基于UI层次结构 按页面布局自然拆分，如Header、Sidebar、MainContent等区域组件。进一步拆分子元素，例如Header中的Logo、SearchBar、UserMenu。
状态管理边界 当组件内部状态变得复杂或需要跨组件共享时，考虑拆分状态逻辑到自定义Hook或上下文（Context）。例如useForm处理表单状态。
代码体积阈值 单个组件文件超过300行代码时，通常需要拆分。通过代码分割（Code Splitting）懒加载非关键组件，优化性能。
拆分后的优化实践
Props设计规范 避免传递过多props，使用对象整合相关属性。例如而非传递多个独立属性。
组件组合模式 通过children或render props实现灵活组合。例如，避免在Modal内部硬编码Form。
性能考量 对频繁更新的部分进行独立拆分，配合React.memo优化渲染。例如大型列表中每项作为独立组件避免整体重渲染。
文档与接口定义 使用PropTypes或TypeScript明确组件接口，辅助后续维护。为每个组件添加README说明使用场景和示例。
通过以上方法可系统化拆分React组件，提升代码可维护性和团队协作效率。实际拆分时需权衡过度拆分带来的碎片化问题，保持合理粒度。
