MobX原理剖析：基于可观察状态和自动依赖追踪的响应式状态管理

news2024/11/27 0:40:45

在这里插入图片描述
我们用代码示例来说明 MobX 的核心原理。

首先,我们定义一个简单的 Store 类,其中包含一个可观察的计数器状态:

import { observable, action } from 'mobx';

class CounterStore {
  @observable count = 0;

  @action
  increment = () => {
    this.count++;
  };

  @action
  decrement = () => {
    this.count--;
  };
}

const counterStore = new CounterStore();

在这个例子中:

我们使用 @observable 装饰器将 count 属性定义为可观察状态。
increment 和 decrement 方法被标记为 @action。这意味着它们是用于修改可观察状态的函数。

接下来,我们在一个 React 组件中使用这个 Store:

import React from 'react';
import { observer } from 'mobx-react-lite';
import counterStore from './CounterStore';

const Counter = observer(() => {
  return (
    <div>
      <p>Count: {counterStore.count}</p>
      <button onClick={counterStore.increment}>Increment</button>
      <button onClick={counterStore.decrement}>Decrement</button>
    </div>
  );
});

export default Counter;

在这个例子中:

我们使用 observer 高阶组件包裹了 Counter 组件。这使得组件能够自动响应 counterStore 中可观察状态的变化。
当点击 “Increment” 或 “Decrement” 按钮时, increment 或 decrement action 将被调用,从而修改 count 状态。
由于 Counter 组件是一个观察者,当 count 状态发生变化时,组件会自动重新渲染。

这就是 MobX 的核心原理:

我们将应用程序的状态定义为"可观察的"。
我们编写用于修改状态的 action 函数。
我们把组件包裹成"观察者",当可观察状态发生变化时,观察者会自动更新。

MobX 会自动追踪代码中对可观察状态的访问,建立起一个依赖关系图。当可观察状态发生变化时,MobX 会通知所有依赖于该状态的观察者进行更新。这种依赖追踪机制使得状态管理变得非常高效和声明式。

通过这个简单的示例,相信你已经大致理解了 MobX 的核心原理，总结一下 MobX 的核心原理:

在这里插入图片描述

基于观察者模式: MobX 的核心思想是基于观察者模式(Observer Pattern)。在 MobX 中,我们将应用程序的状态定义为"可观察的"(observable)，当这些状态发生变化时,与之相关的观察者(通常是 React 组件)会自动得到通知并重新渲染。
自动追踪依赖: MobX 会自动追踪代码中对可观察状态的访问,建立起一个依赖关系图。当可观察状态发生变化时,MobX 会通知所有依赖于该状态的观察者进行更新。这种依赖追踪机制使得状态管理变得非常高效和声明式。
可观察状态: MobX 将应用程序的状态定义为"可观察的"(observable)。可观察状态可以是对象、数组或基本数据类型。MobX 提供了多种装饰器和 API 来定义和操作这些可观察状态。
反应性 Actions: MobX 中的 Actions 是用于修改可观察状态的函数。当 Actions 被执行时,MobX 会自动追踪 Actions 中对可观察状态的读写操作,并通知相关的观察者进行更新。这种自动化的依赖追踪使得状态管理变得非常简单和高效。
runInAction: runInAction 是 MobX 提供的一个特殊的 API,它可以确保在异步操作中状态的更新是原子性的。这意味着状态的更新要么全部成功,要么全部失败,避免了中间状态导致的界面不一致问题。