jadeCarver
如何写React前端业务代码
原创
关注作者
前往小程序,Get
更优
阅读体验!
立即前往
腾讯云
开发者社区
文档
建议反馈
控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
搜索
搜索
关闭
发布
登录/注册
首页
学习
活动
专区
工具
TVP
最新优惠活动
返回腾讯云官网
jadeCarver
首页
学习
活动
专区
工具
TVP
最新优惠活动
返回腾讯云官网
社区首页
>
专栏
>
如何写React前端业务代码
如何写React前端业务代码
原创
jadeCarver
关注
发布于 2022-12-19 10:54:20
272
0
发布于 2022-12-19 10:54:20
举报
文章被收录于专栏:
CS成长之路
业务代码如何写
先解析业务,大需求分层,小需求分步,需要注意的:
面向整个需求(整个项目)的公共逻辑,通过自定义 hook 实现
所有的数据处理逻辑,通过纯函数实现
通过伪代码初步实现
根据伪代码编写 ts 定义
编写 ts 定义需要注意的
定数据实体的形态:view 中的形态以及与后台交互的形态
ts 类型优先于逻辑实现
逻辑变更前,优先变更 ts 定义
同样的类型定义只应该出现一次
逻辑实现
组件的编写思路
确认在UI中的数据形态,data和view保持正交性,目的是一份数据可以出现在多种视图中
也就是说,无关视图的数据和视图的状态数据需要进行隔离
组件的接口必须是尽量简洁的,主要体现在:
同样的行为只允许暴露一个action,例如刷新列表
提供唯一且清晰的数据更新接口,供不同的view使用
根据操作意图写逻辑,而不是数据关系(避免useEffect等的滥用)
数据处理的一些思路
数据上游的生产方和中游使用方尽量提供粒子化的数据
数据的使用方通过纯函数组装成需要的格式
model指的是不会改变的数据,例如API来的数据,是清晰的,无法视图的
controller包含交互数据和action,交互数据指的是页面状态数据,会随着交互变更而变化,例如选中节点这个数据;action值得是变更交互数据的行为逻辑
model 和controller解耦,是因为model的immutable特性,它是可以复用的逻辑;但交互可能因为产品形态变化而变化。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系
cloudcommunity@tencent.com
删除。
react
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系
cloudcommunity@tencent.com
删除。
react
评论
登录
后参与评论
0 条评论
热度
最新
推荐阅读
LV.
文章
0
获赞
0
目录
业务代码如何写
组件的编写思路
数据处理的一些思路
领券
问题归档
专栏文章
快讯文章归档
关键词归档
开发者手册归档
开发者手册 Section 归档
0
0
0
推荐