ReactJS - 最佳实践

本章概述了关键的最佳实践、现代方法和技术，以帮助你编写可维护、可扩展且高性能的 React 应用。

管理状态 (MANAGING STATE)：有效地管理状态。在函数组件中，使用 useState 和 useReducer Hooks 来管理局部组件状态。当需要共享状态时，将其提升到最近的共同祖先组件。对于复杂或全局状态需求，React 的 Context API 是一个不错的选择，或者探索 Redux、Zustand 或 Recoil 等专用库。目标是实现可预测和可追踪的状态。
类型检查 (TYPE CHECKING)：定义 prop types 以确保组件接收到正确的数据。虽然 prop-types 包对于 JavaScript 项目很有用，但强烈建议考虑使用 TypeScript 进行全面的静态类型检查。TypeScript 可以增强工具、代码重构和早期错误检测能力，尤其在大型应用中。
组件逻辑 (COMPONENT LOGIC)：在函数组件中，组件体就是其渲染逻辑。保持代码整洁、专注。直接从 props 或 state 中派生计算值，对于昂贵的计算，使用 useMemo 进行 memoization。将 useEffect 用于副作用，而非复杂的同步逻辑。简化状态结构和 props。
组合与单一职责 (COMPOSITION & SINGLE RESPONSIBILITY)：遵循单一职责原则：每个组件应该只做一件事并做好。将复杂组件分解为更小、更集中的组件，以提高可维护性、可测试性和可重用性。在构建 UI 时，优先选择组合而非继承。
使用自定义 Hooks 复用逻辑 (REUSABLE LOGIC WITH CUSTOM HOOKS)：对于共享状态逻辑或副作用，自定义 Hooks 是惯用的 React 解决方案。虽然高阶组件 (HOCs) 和 Render Props 是现有的代码复用模式，但自定义 Hooks 通常提供一种更直接、更灵活的方式来共享逻辑，而无需改变组件层级结构。示例包括 useFormInput 或 useFetchData。