zl程序教程

您现在的位置是:首页 >  Java

当前栏目

如何写React前端业务代码

2023-02-18 16:33:13 时间

业务代码如何写

  1. 先解析业务,大需求分层,小需求分步,需要注意的:
    1. 面向整个需求(整个项目)的公共逻辑,通过自定义 hook 实现
    2. 所有的数据处理逻辑,通过纯函数实现
  2. 通过伪代码初步实现
  3. 根据伪代码编写 ts 定义
  4. 编写 ts 定义需要注意的
    1. 定数据实体的形态:view 中的形态以及与后台交互的形态
    2. ts 类型优先于逻辑实现
    3. 逻辑变更前,优先变更 ts 定义
    4. 同样的类型定义只应该出现一次
  5. 逻辑实现

组件的编写思路

  1. 确认在UI中的数据形态,data和view保持正交性,目的是一份数据可以出现在多种视图中
    1. 也就是说,无关视图的数据和视图的状态数据需要进行隔离
  2. 组件的接口必须是尽量简洁的,主要体现在:
    1. 同样的行为只允许暴露一个action,例如刷新列表
    2. 提供唯一且清晰的数据更新接口,供不同的view使用
    3. 根据操作意图写逻辑,而不是数据关系(避免useEffect等的滥用)

数据处理的一些思路

  1. 数据上游的生产方和中游使用方尽量提供粒子化的数据
  2. 数据的使用方通过纯函数组装成需要的格式
  3. model指的是不会改变的数据,例如API来的数据,是清晰的,无法视图的
  4. controller包含交互数据和action,交互数据指的是页面状态数据,会随着交互变更而变化,例如选中节点这个数据;action值得是变更交互数据的行为逻辑
  5. model 和controller解耦,是因为model的immutable特性,它是可以复用的逻辑;但交互可能因为产品形态变化而变化。