十分钟玩转Mobx

前端

2023-09-28 11:19:13

Mobx简介

Mobx是一个轻量级的前端状态管理工具，它使用响应式编程的方式来管理应用程序的状态。它允许开发者通过定义可观察对象来管理状态，当可观察对象发生变化时，Mobx会自动更新受其影响的组件。

Mobx与Redux的比较

Mobx与Redux都是流行的状态管理工具，但它们之间存在一些关键差异。

Mobx使用函数式响应式编程，而Redux使用命令式编程。这使得Mobx更易于理解和使用，尤其是对于新手而言。
Mobx允许直接处理异步操作，而Redux需要借助Thunk等工具才能处理异步操作。
Mobx的学习曲线较短，新手可以快速上手。

Mobx的基本概念

可观察对象： 可观察对象是Mobx的核心概念。可观察对象是能够跟踪其属性变化的对象。当可观察对象发生变化时，Mobx会自动更新受其影响的组件。
动作： 动作是用于修改可观察对象的方法。动作必须是纯函数，即它们不能产生副作用。
计算值： 计算值是根据可观察对象计算得出的值。计算值可以用来派生新的可观察对象或用于更新组件。

Mobx的用法

使用Mobx管理状态非常简单，下面是一个示例：

import {observable, action} from 'mobx';

class TodoStore {
  @observable todos = [];

  @action
  addTodo(todo) {
    this.todos.push(todo);
  }

  @action
  removeTodo(todo) {
    this.todos = this.todos.filter(t => t !== todo);
  }
}

const store = new TodoStore();

store.addTodo('Learn Mobx');
store.removeTodo('Learn Mobx');