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 来跟踪状态的变化并在变化发生时执行特定的操作。你可以根据需要扩展这个示例，以适应更复杂的应用场景。