Mobx 初探

2023-10-08 12:51:49

简介

Mobx 是一个轻量级的 JavaScript 状态管理库，它与 React 结合使用非常方便。Mobx 的主要优点是它使用响应式编程范式，这意味着当状态发生变化时，UI 会自动更新。这使得 Mobx 非常适合构建复杂的 React 应用，因为它可以帮助您轻松地管理状态并保持 UI 与状态同步。

Redux 是一个流行的 JavaScript 状态管理库，它与 React 也结合得很好。Redux 的主要优点是它是一个不可变的状态管理库，这意味着一旦状态被创建，就不能被改变。这使得 Redux 非常适合构建需要高可预测性的应用，因为它可以帮助您避免意外的状态突变。

2. 使用场景

Mobx 和 Redux 都是非常强大的状态管理库，但它们各有优缺点。Mobx 更适合构建复杂的 React 应用，因为它可以帮助您轻松地管理状态并保持 UI 与状态同步。Redux 更适合构建需要高可预测性的应用，因为它可以帮助您避免意外的状态突变。

3. 安装Mobx

npm install --save mobx

4. 使用Mobx

import { observable, action, makeObservable } from "mobx";

class Todo {
  @observable name = "";
  @observable completed = false;

  constructor(name) {
    makeObservable(this);
    this.name = name;
  }

  @action
  toggleCompleted() {
    this.completed = !this.completed;
  }
}

const todo = new Todo("Learn MobX");

todo.toggleCompleted(); // 标记待办事项已完成

console.log(todo.completed); // true