在 React 项目的开发过程中，通常会遵循哪些被广泛认可的最佳实践？请从组件设计、代码组织、性能优化、状态管理等方面展开说明。
考察说明
考察候选人对 React 开发中常见最佳实践的系统性理解与实践经验。
回答思路
- 【回答框架 1】组件设计方面，遵循单一职责原则，将组件拆分为可复用的单元，区分展示型组件与容器型组件，使用函数组件和 Hooks 编写逻辑，避免类组件中的复杂生命周期管理。
- 【回答框架 2】代码组织方面，模块化导入导出，使用命名导出，避免默认导出带来的重命名问题；合理利用目录结构，按功能或模块划分文件夹，保持文件大小适中，避免超大组件。
- 【回答框架 3】性能优化方面，使用 React.memo 避免不必要的重渲染，useMemo 缓存计算结果，useCallback 稳定函数引用；合理使用 key 帮助 diff 算法；延迟加载组件和路由，使用代码分割减少首屏加载时间。
- 【回答框架 4】状态管理方面，优先使用 useState 和 useReducer 管理局部状态，对于跨组件状态使用 Context API，复杂全局状态引入 Redux 或 MobX 等库，遵循不可变数据更新原则，避免直接修改状态。
- 【回答框架 5】测试与可维护性方面，编写单元测试，使用 Jest 和 Testing Library，覆盖关键逻辑；使用 PropTypes 或 TypeScript 保证类型安全；保持代码风格一致，使用 ESLint 和 Prettier 等工具。
- 【关键点 1】函数组件配合 Hooks 是现代 React 的主流实践。
- 【关键点 2】使用 React.memo、useMemo、useCallback 优化性能。
- 【关键点 3】按功能组织代码并保持组件单一职责。
- 【关键点 4】状态管理应遵循不可变数据原则。
- 【关键点 5】代码分割和懒加载可显著提升加载性能。
- 【易错点 1】误用 useMemo 和 useCallback 导致过度优化，应优先关注实际性能瓶颈。
- 【易错点 2】滥用 Context 可能导致组件频繁重渲染，应谨慎使用或配合 useMemo。
- 【易错点 3】滥用 key 会影响列表渲染性能，应使用稳定且唯一的标识。