写在前面
- 技术赋能业务，业务促进技术
- 不要提前设计，不要为了用技术而用技术
拥有自己的应用模板
- 沉淀自己的应用模板很重要，这是属于你的最佳实践
- 快速新建项目
- 代码规范配置
- 预设高质量依赖
- 良好的构建配置和插件集合
- 尝试给自己写个脚手架，和模板配合
ts + eslint
- 最大限度确保代码的质量，不过也不能滥用 any
- 封装公共 type，比如
TPlainObject、ISOTimeStamp、颜色枚举等 eslint只做代码检查，不做代码格式化
prettier
- 代码格式化一致性，再也不怕帮同事改代码了
commitlint代码提交前强制格式化.vscode增加formatOnSave
key
请给遍历组件加上 key，提高组件的复用率，避免错位(index 做 key)导致的更新异常现象
正确用 Hook
- 统一使用 Hook 编写组件
- 只能在最顶层使用，不要在循环、条件语句或函数中使用
- 变量和对应的函数(
func/effect)放一起，而不是给所有变量和所函数划分界限 - 适当使用
useState，部分情况可以用useRef替代
最小原则
- 最小渲染次数。这个是架构层面出发的必须注重的优化，react 应用的性能优化基本都会从这里开始。通过
useMemo或者shouldUpdateComponent/memo来避免组件的重复渲染 - 擅用缓存。可以借助
useCallback或useRef缓存变量和函数，避免重复创建 - 最少依赖项。使用新的依赖之前，先思考必要性。比如 Redux，如果只是小项目，通信也不复杂，那直接用 Context 有何不可
组件化
遵守单一职责原则，确保组件简洁、耦合度小、功能明确
能否做好组件化是鉴别前端工程师能力的一个重要方式
卸载
别忘了卸载定时器、移除事件，不要浪费内存
错误边界
给组件都统一添加错误边界(Error Boundary)来防止白屏。让 PM、测试看到白屏和局部错误是俩回事
单元测试
公共组件和工具函数/自定义 Hook，有时间的话写点单元测试，受益匪浅哦。覆盖率尽可能大于 70%，单元测试工具推荐 Jest
应用优化
- 加快首屏
- 组件/路由/资源懒加载
- 本地/离线缓存
- 减小包体积
- 代码分割
- 按需加载
- tree shaking
总结
有讲的不对、需要改进的地方，欢迎评论，一块进步 ~