如何写出工程化、可维护的代码?
开发的第一步:编写TS类型
数据分类:
- 接口请求数据
- 接口响应数据
- 页面数据:UI数据;临时状态数据。
判断一个数据是否值得存入redux时,需要考虑两个问题:
- 这个数据是否需要被非父子关系的组件共享。需要共享的数据,才值得放入redux。
- 这个数据是否能从redux已有的数据中计算出来。如果能从已有数据计算得出,就不要增加新的数据,而是使用状态管理工具的计算方法计算得出。以保持状态树的结构简洁无冗余,保证数据更新不易出错。
使用自定义hook拆分大块逻辑:
模块化的目标是分治和复用。尽管业务工程中的组件复用的概率很低,但是分而治之以保证逻辑清晰易读也十分重要。
将一个冗长的组件拆分成若干个小组件,将一段冗长的逻辑拆分为hooks,都是前端CRUD的有效分治手段。
美观也是代码质量的一部分:
如果说人对衣着美观的基本要求是干净,那么对代码的基本要求应该是没有eslint警告、没有拼写错误。这些很容易做到,尤其是现代ide已经做的非常好,帮你提示了一切问题。对于变量的命名也需要语义化,提高可读性。
经验总结
多f12打开控制台调试
对于一份prd,可以通过拆解的方式明确前端具体要做的是什么,关注点分离:后端提供数据、处理业务逻辑;前端接收数据、处理渲染逻辑。