极简状态的优雅

在现代前端开发中，状态同步（State Synchronization） 往往是万恶之源。每当为了方便访问而复制一份数据时，你就创造了一个潜在的 Bug 滋生地。

同步带来的问题

假设我们有一个状态空间 $S$。如果我们有两个需要同步的状态 $S_1$ 和 $S_2$，那么有效的状态空间严格来说只有 $S_1 = S_2$ 的对角线部分。发生错误的概率为：

$$P(\text{error}) = 1 - P(S_1 = S_2)$$

为什么会发生这种情况？

当我们将前端状态视为一个可变的缓存时，数据不一致的问题就会频繁出现。比如一个列表数据和一个记录选中项的状态，当列表数据更新时，如果忘记同步更新选中项，UI 就会崩溃。

解决方案：派生状态 (Derived State)

我参与过的最优雅的系统都有一个共同点：积极地派生状态。与其存储过滤后的项目列表，不如只存储原始项目和过滤条件。过滤后的列表仅仅是一个投影（Projection）。

// ❌ 糟糕的做法：手动同步状态
const [items, setItems] = useState(allData);
const [filteredItems, setFilteredItems] = useState(allData);

// ✅ 优雅的做法：派生状态
const [items, setItems] = useState(allData);
const [filter, setFilter] = useState('all');
const filteredItems = useMemo(() => applyFilter(items, filter), [items, filter]);

这种心智模型将 UI 开发从一系列命令式的更新，转变为纯粹的数据转换管道。它具有极高的可预测性、易于测试，并且从根本上更加健壮。