如何写React前端业务代码

业务代码如何写

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特性，它是可以复用的逻辑；但交互可能因为产品形态变化而变化。