2023 年的 React 生态（上）https://developer.aliyun.com/article/1411448
表单
React 中最流行的表单库是 React Hook Form。 它带有从验证（最流行的集成是 zod）到提交到表单状态管理所需的一切。 替代方案有 Formik 和 React Final Form。 如果已经在使用了 React UI 库，可以查看它们内置的表单解决方案。
建议
- React Hook Form
- 与用于验证的 zod 集成
- 如果使用 UI 库，可以检查内置表单是否满足所有需求
- React Hook Form 带有一个干净的 API，用于 UI 库集成
类型检查
React 带有一个名为 PropTypes 的内部类型检查。 通过使用 PropTypes，可以为 React 组件定义 props。 每当将错误类型的 prop 传递给组件时，将在运行应用时收到错误消息：
import PropTypes from 'prop-types'; const List = ({ list }) => <div> {list.map(item => <div key={item.id}>{item.title}</div>)} </div> List.propTypes = { list: PropTypes.array.isRequired, };
但是，PropTypes 不再包含在 React 核心库中。 在过去的几年里，PropTypes 变得不那么流行了，取而代之的是 TypeScript：
type Item = { id: string; title: string; }; type ListProps = { list: Item[]; }; const List: React.FC<ListProps> = ({ list }) => <div> {list.map(item => <div key={item.id}>{item.title}</div>)} </div>
如果想在 React 中接受类型，TypeScript 是目前的最佳选择。如果想超越 TypeScript 进行类型化表单验证、API 输入/输出验证等，可以使用 Zod。
建议
- 如果需要类型化的 JavaScript，请使用 TypeScript。
风格和格式
如果想拥抱统一的代码风格，可以在 React 项目中使用 ESLint。 ESLint 等 linter 在 React 项目中强制执行特定的代码风格。例如，可以要求 ESLint 遵循流行的风格指南（例如 Airbnb 风格指南）。 可以将其与 ESLint 与 IDE/编辑器集成，它会指出每个错误。
如果想拥抱统一的代码格式，可以在 React 项目中使用 Prettier。 它是一个代码格式化程序，只有少数可选配置。 可以将它集成到编辑器或 IDE 中，以便在每次保存文件时格式化代码。尽管 Prettier 并没有取代 ESLint，但它与 ESLint 集成得很好。
建议
- ESLint + Prettier
身份验证
在 React 应用中，如果希望引入具有注册、登录和注销等功能的身份验证。通常还需要其他功能，如密码重置和密码更改功能。这些功能远远超出了 React 的范畴，因为后端应用会管理这些事情。
由于身份验证会带来很多安全风险和并非人人都知道的细节，建议使用现有的身份验证/后端即服务解决方案：
- Firebase Auth
- Supabase Auth
- Auth0
- AWS Cognito
建议
- 选择身份验证服务或 BaaS（例如 Firebase/Supabase）
部署和托管
可以像任何其他 Web 应用一样部署和托管 React 应用。 如果想完全控制，可以选择 Digital Ocean。 如果想让托管服务处理所有事情，Netlify 或 Vercel（尤其是 Next.js）是流行的解决方案。 如果已经在使用第三方后端作为 Firebase/Supabase 等服务，可以检查他们是否也提供托管服务。其他流行的托管服务提供商有 Render、Fly.io 或 Railway。
测试
可以使用 Jest 这样的测试框架来测试 React 应用。 它提供了测试运行程序、断言库等功能，综合了测试框架所需的一切。 如果你是 Vite 的粉丝，可以使用 Vitest 作为 Jest 替代品。
可以使用 react-test-renderer 在测试框架中渲染 React 组件。这已经足以使用 Jest 或 Vitest 执行快照测试。 快照测试的工作方式如下：运行测试后，将创建 React 组件的渲染 DOM 元素的快照。 当在某个时间点再次运行测试时，将创建另一个快照，用作前一个快照的差异。如果差异不相同，测试框架会报错，要么必须接受快照，要么更改组件的实现。
React Testing Library (RTL) 是一个比较流行的 React 测试库，RTL 使渲染组件和模拟 HTML 元素上的事件成为可能。之后，可以使用测试框架（例如 Jest/Vitest）用于 DOM 节点上的断言。
如果正在寻找用于 React 端到端 (E2E) 测试的测试工具，Playwright 和 Cypress 是最受欢迎的选择。
建议
- 单元/集成测试：Jest/Vitest + React Testing Library（最受欢迎）
- 快照测试：Jest/Vitest
- E2E 测试：Playwright、Cypress
不可变数据结构
原生 JavaScript 提供了大量内置工具来处理数据结构，就好像它们是不可变的一样。 但是，如果需要使用不可变数据结构，那么最受欢迎的选择之一就是 Immer。
国际化
当涉及到 React 应用的国际化 i18n 时，不仅需要考虑翻译，还需要考虑多元化、日期和货币的格式等。 这些是处理它的最受欢迎的库：
- FormatJS
- react-i18next
富文本编辑器
React 中的富文本编辑器：
- Draft.js
- Slate.js
- ReactQuill
时间
近年来，JavaScript 本身在处理日期和时间方面变得非常棒，如果 React 应用需要大量处理日期、时间和时区，可以引入一个库来管理这些东西。
- date-fns
- Day.js
- Luxon
桌面应用程序
Electron 仍然是跨平台桌面应用程序的首选框架。 还有一些替代方案，例如：
- Tauri（很好的选择，非常受欢迎）
- Neutralino.js
- NW.js
文件上传
- react-dropzone
- filepond
移动开发
将 React 从 Web 带到移动设备的首选解决方案是 React Native。
VR/AR
使用 React 可以深入虚拟现实或增强现实。现成的解决方案包括：
- react-three-fiber
- react-360
- aframe-react
组件文档
编写组件文档的解决方案包括：
- Storybook
- Docusaurus
- Docz
- Styleguidist
