如何写React前端业务代码
2023-02-18 16:33:13 时间
业务代码如何写
- 先解析业务,大需求分层,小需求分步,需要注意的:
- 面向整个需求(整个项目)的公共逻辑,通过自定义 hook 实现
- 所有的数据处理逻辑,通过纯函数实现
- 通过伪代码初步实现
- 根据伪代码编写 ts 定义
- 编写 ts 定义需要注意的
- 定数据实体的形态:view 中的形态以及与后台交互的形态
- ts 类型优先于逻辑实现
- 逻辑变更前,优先变更 ts 定义
- 同样的类型定义只应该出现一次
- 逻辑实现
组件的编写思路
- 确认在UI中的数据形态,data和view保持正交性,目的是一份数据可以出现在多种视图中
- 也就是说,无关视图的数据和视图的状态数据需要进行隔离
- 组件的接口必须是尽量简洁的,主要体现在:
- 同样的行为只允许暴露一个action,例如刷新列表
- 提供唯一且清晰的数据更新接口,供不同的view使用
- 根据操作意图写逻辑,而不是数据关系(避免useEffect等的滥用)
数据处理的一些思路
- 数据上游的生产方和中游使用方尽量提供粒子化的数据
- 数据的使用方通过纯函数组装成需要的格式
- model指的是不会改变的数据,例如API来的数据,是清晰的,无法视图的
- controller包含交互数据和action,交互数据指的是页面状态数据,会随着交互变更而变化,例如选中节点这个数据;action值得是变更交互数据的行为逻辑
- model 和controller解耦,是因为model的immutable特性,它是可以复用的逻辑;但交互可能因为产品形态变化而变化。
相关文章
- Jmeter扩展组件开发(7) - 自定义java请求的开发
- c字符串详细解析
- 断网了怎么办?那就快去体验【Microsoft Edge浏览器】提供的离线冲浪小游戏~娱乐一下
- 大一学生课设c——服装管理系统
- 1篇文章教会你MarkDown语法,从此开始博客之路
- 蓝桥杯每日一刷(第一天)
- 蓝桥杯每日一刷(第二天)
- 蓝桥杯每日一刷(第三天)
- 二叉树的三种遍历方式
- CONCATENATEX函数的不归路
- 搜索算法dfs和bfs解析(附有例题)
- 蓝桥杯每日一刷(第四天2016)
- 听说你还不会滑动窗口?来一篇文章带你学会滑动窗口算法
- Microsoft VS Code安装教程
- 肝一个周整理Java中容易混淆的基础知识
- ASICS的报表有哪些值得学习的地方?
- 蓝桥杯每日一刷(第六天)——暂会哈希
- 旅行商问题近似解——NP完全问题
- 【DHCP实验】使用三层交换机配置DHCP Server服务器(基于全局地址池配置)
- 前端和后端到底有什么区别?——第100篇文章(送给迷茫的你)