React 中 MobX 的核心概念是什么？-JavaScript中文网-JavaScript教程资源分享门户

本题详细解读

Observable State（可观察状态）

在 MobX 中，状态是应用的核心。通过将状态标记为可观察的，MobX 能够自动追踪状态的变化。例如：

import { observable } from 'mobx';

class Store {
  @observable count = 0;
}

在这个例子中，count 是一个可观察的状态。当 count 发生变化时，所有依赖于它的组件或计算值都会自动更新。

Actions（动作）

Actions 是修改状态的方法。MobX 通过 @action 装饰器或 action 函数来标记这些方法，确保状态的变化是可追踪的。例如：

// www.javascriptcn.com code example
import { observable, action } from 'mobx';

class Store {
  @observable count = 0;

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

在这个例子中，increment 方法是一个动作，它修改了 count 状态。MobX 会确保这个状态变化是可追踪的，并且所有的状态更新都在一个事务中进行。

Computed Values（计算值）

计算值是基于现有状态派生出的值。它们会自动缓存，并且只有在依赖的状态发生变化时才会重新计算。例如：

// www.javascriptcn.com code example
import { observable, computed } from 'mobx';

class Store {
  @observable count = 0;

  @computed get doubleCount() {
    return this.count * 2;
  }
}

在这个例子中，doubleCount 是一个计算值，它基于 count 状态派生出来。当 count 发生变化时，doubleCount 会自动重新计算。

Reactions（反应）

Reactions 是 MobX 中的副作用处理机制。通过 autorun、reaction 或 when 等函数，可以在状态发生变化时自动执行某些操作。例如：

// www.javascriptcn.com code example
import { observable, autorun } from 'mobx';

class Store {
  @observable count = 0;
}

const store = new Store();

autorun(() => {
  console.log(`Count: ${store.count}`);
});

store.count = 1; // 输出: Count: 1

在这个例子中，autorun 函数会在 count 状态发生变化时自动执行，输出当前的 count 值。

Derivations（派生）

派生是指从状态中派生出新的数据或行为。计算值和反应都是派生的具体表现形式。MobX 通过自动追踪状态的变化，确保派生出的数据或行为始终与状态保持一致。

通过理解这些核心概念，开发者可以更好地利用 MobX 来管理 React 应用中的状态，并构建高效、可维护的应用。

React 中 MobX 的核心概念是什么？

推荐答案