React Native 中 MobX 的核心概念有哪些？-JavaScript中文网-JavaScript教程资源分享门户

本题详细解读

Observable State（可观察状态）

在 MobX 中，状态是应用的核心。通过将状态标记为可观察的，MobX 能够追踪状态的变化，并在状态变化时自动更新依赖该状态的组件或计算值。例如：

import { observable } from 'mobx';

class Store {
  @observable count = 0;
}

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

Actions（动作）

动作是修改状态的唯一途径。通过将状态修改操作封装在动作中，MobX 可以确保状态的变化是可预测的，并且可以在开发工具中追踪这些变化。例如：

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

class Store {
  @observable count = 0;

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

在这个例子中，increment 是一个动作，它修改了 count 状态。

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 状态。

Reactions（反应）

反应是 MobX 中的副作用处理机制。它们用于在状态发生变化时自动执行某些操作。例如：

import { observable, autorun } from 'mobx';

const store = observable({ count: 0 });

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

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

Observers（观察者）

在 React Native 中，observer 函数或 @observer 装饰器用于将 React 组件转换为观察者。当组件依赖的可观察状态发生变化时，组件会自动重新渲染。例如：

// www.javascriptcn.com code example
import { observer } from 'mobx-react';
import React from 'react';

@observer
class Counter extends React.Component {
  render() {
    return <div>{this.props.store.count}</div>;
  }
}

在这个例子中，Counter 组件是一个观察者，当 store.count 发生变化时，组件会自动重新渲染。

React Native 中 MobX 的核心概念有哪些？

推荐答案