如何在React新项目中选择最佳的打包和状态管理工具？

构建现代React项目：打包与状态管理最佳实践

近年来，React生态系统在构建工具和状态管理方面日新月异。本文将分享一个资深React开发者（拥有四年开发经验）在新项目中技术选型的经验，特别是针对从vue和Vite转向React开发者的场景。

作者曾使用过Create React App (CRA)、webpack以及阿里巴巴开源的umijs。然而，umijs基于dva，而dva依赖redux-sagas，导致typescript类型定义丢失（yield关键字问题）。

鉴于Vite在生产环境的成熟应用，作者决定在新项目中采用Vite替代Webpack。主要的技术选型集中于状态管理工具。目标是寻找一个现代化、高效的状态管理方案。

最终，项目采用vite + react-router + zustand的组合。以下是具体原因：

1. Vite React 模板: 选择了一个精简的Vite React模板，仅包含ESLint和TypeScript，并额外添加了react-swc以提升编译速度。
2. React Router: 路由方面，react-router仍然是最佳选择，几乎没有可比拟的替代方案。
3. Zustand: 在众多状态管理库中，zustand脱颖而出。其设计理念与Pinia（甚至React Hooks）类似，代码简洁，支持异步操作，并内置immer中间件，使得状态管理更加高效和直观。

希望以上经验能帮助您在新React项目中做出明智的决策，并提升开发效率。