Legend-State 中 Observable 可变性导致的渲染问题解析

问题现象

在使用 Legend-State 状态管理库时，开发者遇到了一个关于 Observable 数组操作的有趣现象：当尝试从数组中移除元素时，如果使用 .get() 方法获取数组副本进行操作，组件不会重新渲染；而如果使用扩展运算符创建新数组，则能正常触发渲染更新。

核心原因

这个问题的根源在于 Legend-State 与 React 在状态管理理念上的差异：

1. 可变性设计：Legend-State 的 Observable 采用可变设计（mutable），而非 React 推崇的不可变（immutable）模式
2. 直接修改问题：当开发者通过 .get() 获取底层数组引用并直接修改时，Legend-State 无法感知变化
3. 通知机制失效：直接修改原始数组后再次 .set() 相同引用会被视为无变化操作

解决方案

针对数组操作，Legend-State 提供了更优雅的原生方法：

const handleOnPress = (exercise, listItemIndex) => {
    let index = checkIndex.get().indexOf(listItemIndex);
    if (index >= 0) {
        checkIndex.splice(index, 1);  // 直接使用 Observable 的 splice 方法
    } else {
        checkIndex.push(listItemIndex);  // 直接使用 push 方法
    }
};

最佳实践建议

1. 优先使用 Observable 原生方法：如 .push(), .pop(), .splice() 等，这些方法内部已处理好变更通知
2. 避免不必要的 .get()：直接操作 Observable 对象而非其值
3. 理解可变性差异：从 React 不可变思维过渡到 Legend-State 的可变思维
4. 数组操作注意：对于查找类方法如 indexOf，使用 .get().indexOf() 或直接 .indexOf() 均可

技术背景

Legend-State 采用可变设计主要出于性能考虑：

• 避免了不可变操作中频繁创建新对象的开销
• 减少了内存占用
• 提升了大规模数据操作的效率

这种设计理念要求开发者改变 React 中惯用的不可变模式思维，转而直接操作状态对象本身。理解这一核心差异是高效使用 Legend-State 的关键。