简介
已经研究了一年左右react,目前时机成熟,知识储备足够,我们决定正式在生产环境使用react+ts,期间遇到了一些只在生产环境需要考虑的问题,也踩了许多坑,这个系列会持续更新,记录react在针对生产环境开发和部署时遇到的实际问题、分析过程和解决方案。
本系列文章适合有webpack基础、对前端架构设计有一定了解、写过react+ts代码的前端工程师阅读,不适合萌新和不熟悉ts的同学。
写这个系列的主要目的是分享解决问题的思路和方案,而不是教程,要读懂这些文章,你必须:
- 了解webpack配置和前端工程化
- 理解为什么要使用文中所提到的技术和工具
- 写过生产环境中的代码
- 理解typescript
技术栈
我们在生产环境运行的项目主要涉及以下技术:
- react 16.8+ 支持hooks即可
- typescript 3.8+ 高高益善
- react-router-dom 5.0+ 新版更优雅
- redux 4+, react-redux 状态管理
- rxjs 6+, redux-observable 适合我们的异步中间件
- react-transition-group 满足简单的动画需求
- @loadable/component 按需加载组件
- axios 考虑到团队,虽然已经有了rxjs,依然保留axios
- eslint, prettier, husky 开发规范
- less, postcss 处理样式
- jest 测试框架
还有一些辅助工具:
- js-cookie cookie处理都靠它
- lodash-es 老牌工具库
- qs 虽然node内置的querystring模块也能用,但qs显然更好用
- moment 时间处理
- classnames 方便地处理classname
- typesafe-actions 优雅地构造状态管理的action
- utility-types 好用的ts类型扩展工具
参考资料
react本身并不难,但是配合typescript使用后,会遇到一些奇怪的问题,这里有一些参考资料,能给react+ts提供思路:
- react-typescript-cheatsheet,提供许多demo代码
- react-redux-typescript-guide,解决90%的react相关的类型困惑
项目的结构和选型
初始脚手架
项目基于 create-react-app
生成,我们有维护webpack配置的能力,并且希望最大限度地自定义打包过程,因此用 eject
弹出全部配置,目录结构基本维持原状。
路由与鉴权
我们基于 react-router-dom
进行了大刀阔斧的改造,这里不提供细节和实现方法。由于团队之前一直使用vue,更习惯于vue的路由配置,改造后的路由写法与vue基本相同,类似这样:
1 | export const routes: RouteInterface[] = [ |
状态管理
我们的应用重状态管理,hooks不能完全满足需求,在不使用装饰器的情况下,redux
是最适合我们的选择。redux的目录结构采用 ducks
方案,比较贴近我们之前在vuex中的设计,类似这样:
1 | // vuex |
在react中:
1 | import { DeepReadonly } from 'utility-types' |
关于异步方案的选型,我们的业务涉及非常复杂的数据流程,redux-saga
的写法怪异,因此我们选择 rxjs
作为异步方案,redux-observable
是个现成的可使用redux异步中间件。