66 lines
1.9 KiB
Markdown
66 lines
1.9 KiB
Markdown
---
|
||
sidebar_position: 2
|
||
---
|
||
|
||
# 数据流与数据副本
|
||
|
||
## 什么是数据流
|
||
|
||
数据流描述的是数据在系统中的流动方向：数据从哪里产生，经过哪些处理，最终流向哪里。
|
||
|
||
以一个典型的前端页面为例
|
||
|
||
```
|
||
用户操作（事件） -> 更新数据（state） -> 重新渲染（view） -> 用户看到新界面
|
||
```
|
||
|
||
单向数据流的好处是：数据的变更路径清晰，出问题时可以顺着方向排查。
|
||
|
||
## 系统行为与数据
|
||
|
||
系统的行为本质上是数据随时间的变化。界面只是数据在某一时刻的快照。
|
||
|
||
```ts
|
||
// 数据决定界面：list 是什么，页面就渲染什么
|
||
function render(list: TodoItem[]) {
|
||
// ...
|
||
}
|
||
```
|
||
|
||
理解了"界面是数据的投影"，很多问题就变成了数据问题：界面不对，先检查数据对不对、数据什么时候被改了。
|
||
|
||
## 数据副本（数据孤岛）
|
||
|
||
当同一份数据被多个地方持有副本时，问题就出现了
|
||
|
||
- 修改了 A 副本，B 副本还是旧值，界面之间不一致
|
||
- 不知道哪份副本是"权威数据"（source of truth）
|
||
|
||
这就是所谓的数据孤岛：每份数据各自为政，互相不同步。
|
||
|
||
### 解决思路
|
||
|
||
1. **单一数据源**：同一份数据只在一个地方持有，其他地方通过引用或订阅获取
|
||
2. **不可变更新**：修改时返回新副本，而不是就地修改，让变更可追踪
|
||
|
||
```ts
|
||
// 多副本，各自为政（数据孤岛）
|
||
let listA = [1, 2, 3];
|
||
let listB = [1, 2, 3]; // 与 listA 无关联
|
||
|
||
// 单一数据源 + 派生
|
||
const list = [1, 2, 3];
|
||
const activeList = list.filter((item) => item !== 0); // 从 list 派生
|
||
```
|
||
|
||
在前端框架中的体现
|
||
|
||
- React 的 `state` 与 `props`：数据自上而下流动，子组件不直接修改
|
||
- 派生数据不单独存储，而是在渲染时计算
|
||
|
||
## 小结
|
||
|
||
- 界面是数据的投影，先保证数据正确
|
||
- 保持数据流单向、可追踪
|
||
- 避免同一份数据的多副本，维护单一数据源
|