使用mobx反应可排序的JS

MobX 是一个流行的状态管理库，它通过响应式编程使得状态管理变得简单且高效。在 JavaScript 中使用 MobX 来实现可排序的功能，可以让你轻松地管理列表的排序状态，并且当排序发生变化时，相关的 UI 组件会自动更新。

基础概念

MobX 是一个简单、可扩展的状态管理库，它通过透明的函数响应式编程（TFRP）使得状态管理变得简单和可扩展。MobX 使用 observables（可观察对象）、actions（动作）和 reactions（反应）来管理状态。

类型与应用场景

类型：

Observables：可观察的状态。
Actions：改变状态的方法。
Reactions：响应状态变化的副作用。

应用场景：

复杂的状态管理：适用于任何需要管理复杂状态的场景。
实时数据更新：如聊天应用、实时监控系统等。
表单管理：如可排序的列表、筛选和搜索功能。

示例代码

以下是一个使用 MobX 实现可排序列表的简单示例：

import { observable, action, makeObservable } from 'mobx';
import { observer } from 'mobx-react';

class SortableListStore {
  items = ['Apple', 'Banana', 'Cherry'];

  constructor() {
    makeObservable(this, {
      items: observable,
      sortItems: action,
    });
  }

  sortItems() {
    this.items.sort();
  }
}

const sortableListStore = new SortableListStore();

const SortableList = observer(() => {
  return (
    <div>
      <button onClick={() => sortableListStore.sortItems()}>Sort</button>
      <ul>
        {sortableListStore.items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
});

export default SortableList;