颤振 MobX 可观察列表介绍

MobX 是一个简单、可扩展的状态管理库，它可以帮助我们更好地组织和管理应用程序中的可变状态。

本文将介绍 MobX 中的可观察列表（Observable List），以及如何使用它来管理和响应列表中的数据。

什么是可观察列表？

可观察列表是一个可变的列表，为了使用 MobX 优化列表的性能，它必须使用 observable 函数进行包装。在对列表进行修改时，MobX 将会自动跟踪这些更改并更新对应的组件。

创建可观察列表

要创建可观察列表，我们需要使用 observable 函数，例如：

import { observable } from 'mobx';

const myList = observable([]);

在上面的示例中，我们定义了一个空的可观察列表 myList。如果我们要向列表中添加项目，可以使用 push 方法：

myList.push('item 1');
myList.push('item 2');

使用可观察列表

一旦我们创建了可观察列表，我们可以使用类似于标准 JavaScript 数组的方法来访问和操作列表，如 pop、shift、slice、splice 等等。

例如，我们可以使用 map 方法来遍历可观察列表中的所有项目：

myList.map(item => {
  // do something with item
})

当我们添加、删除、移动列表中的项目时，对应的组件也会自动更新。例如：

myList.push('new item');

// UI 将会自动更新，显示 new item

使用可观察列表的注意事项

由于 MobX 是响应式状态管理库，我们需要注意一些细节，以充分利用它的优势：

• 对可观察列表进行访问时，应该避免使用索引访问方式（例如通过 myList[0] 访问列表的第一个项目），而应该使用 map、forEach、filter 等迭代器模式来对列表进行操作，这样 MobX 才可以跟踪这些更改。

• 当我们需要对一个可观察列表进行联合操作（例如排序、合并、过滤等），我们需要在将列表转换为标准 JavaScript 数组之前，先复制列表并排序或合并。这可以通过传递可观察列表到 slice 或 concat 函数中实现。

结论

使用可观察列表，我们可以更方便地管理和响应列表中的可变数据，从而提高我们应用程序的性能和可维护性。建议在大规模列表的场景中使用可观察列表，以充分利用 MobX 的优势。