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

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

引用

CSDN

1.

https://m.blog.csdn.net/sky6862/article/details/137655455

我们用代码示例来说明 MobX 的核心原理。
首先,我们定义一个简单的 Store 类,其中包含一个可观察的计数器状态:

import { observable, action } from 'mobx';
class CounterStore {
  @observable count = 0;
  @action
  increment = () => {
    this.count++;
  };
  @action
  decrement = () => {
    this.count--;
  };
}
const counterStore = new CounterStore();

在这个例子中:

1. 我们使用
   @observable
   装饰器将
   count
   属性定义为可观察状态。
2. 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;

在这个例子中:

1. 我们使用
   observer
   高阶组件包裹了
   Counter
   组件。这使得组件能够自动响应
   counterStore
   中可观察状态的变化。
2. 当点击 “Increment” 或 “Decrement” 按钮时,
   increment
   或
   decrement
   action 将被调用,从而修改
   count
   状态。
3. 由于
   Counter
   组件是一个观察者,当
   count
   状态发生变化时,组件会自动重新渲染。
   这就是 MobX 的核心原理:
4. 我们将应用程序的状态定义为"可观察的"。
5. 我们编写用于修改状态的 action 函数。
6. 我们把组件包裹成"观察者",当可观察状态发生变化时,观察者会自动更新。
   MobX 会自动追踪代码中对可观察状态的访问,建立起一个依赖关系图。当可观察状态发生变化时,MobX 会通知所有依赖于该状态的观察者进行更新。这种依赖追踪机制使得状态管理变得非常高效和声明式。
   通过这个简单的示例,相信你已经大致理解了 MobX 的核心原理，总结一下 MobX 的核心原理:
7. 基于观察者模式: MobX 的核心思想是基于观察者模式(Observer Pattern)。在 MobX 中,我们将应用程序的状态定义为"可观察的"(observable)，当这些状态发生变化时,与之相关的观察者(通常是 React 组件)会自动得到通知并重新渲染。
8. 自动追踪依赖: MobX 会自动追踪代码中对可观察状态的访问,建立起一个依赖关系图。当可观察状态发生变化时,MobX 会通知所有依赖于该状态的观察者进行更新。这种依赖追踪机制使得状态管理变得非常高效和声明式。
9. 可观察状态: MobX 将应用程序的状态定义为"可观察的"(observable)。可观察状态可以是对象、数组或基本数据类型。MobX 提供了多种装饰器和 API 来定义和操作这些可观察状态。
   
10. 反应性 Actions: MobX 中的 Actions 是用于修改可观察状态的函数。当 Actions 被执行时,MobX 会自动追踪 Actions 中对可观察状态的读写操作,并通知相关的观察者进行更新。这种自动化的依赖追踪使得状态管理变得非常简单和高效。
11. runInAction:
    runInAction
    是 MobX 提供的一个特殊的 API,它可以确保在异步操作中状态的更新是原子性的。这意味着状态的更新要么全部成功,要么全部失败,避免了中间状态导致的界面不一致问题。
    总的来说,MobX 的核心原理就是利用可观察状态和自动依赖追踪的方式,构建出一个响应式的状态管理系统。这种方式使得应用程序的状态管理变得更加简单、可靠和可预测。
    runInAction
    则进一步增强了 MobX 在处理异步操作时的稳定性。