Mobx reaction 使用

MobX 的 reaction 是一个强大的工具，用于响应式地执行副作用。下面是一个简单的示例，展示了如何使用 MobX 的 reaction 来监听状态的变化并执行相应的操作。 在这个例子中，我们创建了一个简单的计数器应用，当计数器的值发生变化时，会在控制台输出新的计数值。 首先，确保你已经安装了 MobX 和 MobX React Lite：

npm install mobx mobx-react-lite

以下是完整的代码实现：

import React from 'react';
import ReactDOM from 'react-dom';
import { makeAutoObservable } from 'mobx';
import { observer } from 'mobx-react-lite';

// 定义一个观察对象
class CounterStore {
  count = 0;
  constructor() {
    makeAutoObservable(this);
  }
  increment() {
    this.count += 1;
  }
}

const counterStore = new CounterStore();

// 创建一个 reaction，监听 count 属性的变化
import { reaction } from 'mobx';

reaction(
  () => counterStore.count,
  (count, previousCount) => {
    console.log(`Count changed from ${previousCount} to ${count}`);
  }
);

const App = observer(() => (
  
    MobX Reaction Example
    Current Count: {counterStore.count}
    Increment
  
));

ReactDOM.render(, document.getElementById('root'));

说明

1. CounterStore: 这是一个简单的类，包含一个可观察的状态属性 count 和一个方法 increment 来增加计数。
2. makeAutoObservable: 这个函数会自动将所有字段标记为可观察，并将所有方法转换为动作（action）。
3. reaction: 这个函数接受两个参数：第一个参数是一个 getter 函数，返回要观察的值；第二个参数是一个 effect 函数，在观察到的值变化时执行。这里我们在控制台打印出计数的变化情况。
4. observer: 这个高阶组件使 React 组件能够响应 MobX 状态的变化。 这个示例展示了如何使用 MobX 的 reaction 来跟踪状态的变化并在变化发生时执行特定的操作。你可以根据需要扩展这个示例，以适应更复杂的应用场景。