react如何拆分组件
拆分React组件的原则与方法
单一职责原则 每个组件应只负责一个功能或展示一部分UI。例如按钮组件只处理点击事件，表单组件只管理表单状态。
容器与展示组件分离 将逻辑处理（数据获取、状态管理）放在容器组件中，UI渲染放在展示组件中。容器组件通过props传递数据给展示组件。
按功能或UI模块拆分
功能模块划分 根据应用功能划分组件，如导航栏、侧边栏、内容区等。每个功能模块可进一步拆分为更小的子组件。
UI元素复用 将重复使用的UI元素（如按钮、输入框、卡片）提取为独立组件。通过props配置不同表现，提高代码复用率。
状态管理考量
状态提升 当多个组件需要共享状态时，将状态提升到最近的共同父组件。通过props向下传递数据，回调函数向上传递状态变更。
Context API使用 对于深层嵌套的组件树，使用Context避免多层props传递。创建独立的Context组件管理特定领域的状态。
代码组织建议
文件结构规范 按功能或页面组织组件文件。典型结构示例：
src/
components/
Button/
index.js
styles.css
Header/
index.js
Nav.js
pages/
Home/
index.js组件命名约定
使用PascalCase命名组件文件，如UserProfile.js。导出的组件名称必须与文件名一致。
性能优化技巧
React.memo应用
对纯展示组件使用React.memo避免不必要的渲染。适用于props没有变化的静态组件。
懒加载实现
使用React.lazy和Suspense拆分大型组件为异步加载模块。减少初始包体积，提升加载性能。
组件通信模式
自定义事件机制 通过props传递回调函数实现父子通信。对于非父子关系，可使用自定义事件或状态管理库。
组合模式运用
通过children属性或具名插槽实现组件组合。例如<Layout><Header/><Content/></Layout>。
