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

推荐答案

在 React Native 中，MobX 的核心概念包括以下几个：

1. Observable State（可观察状态）：MobX 通过 @observable 装饰器或 observable 函数将状态标记为可观察的。任何被标记为可观察的状态发生变化时，依赖该状态的组件或计算值会自动更新。

2. Actions（动作）：Actions 是修改状态的操作。MobX 通过 @action 装饰器或 action 函数来定义动作。动作是唯一可以修改状态的地方，确保状态的变化是可预测的。

3. Computed Values（计算值）：计算值是通过 @computed 装饰器或 computed 函数定义的派生值。它们是基于可观察状态自动计算得出的，并且只有在依赖的状态发生变化时才会重新计算。

4. Reactions（反应）：Reactions 是 MobX 中的副作用处理机制。通过 autorun、reaction 或 when 等函数，可以在状态发生变化时自动执行某些操作，例如更新 UI 或触发网络请求。

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

本题详细解读

Observable State（可观察状态）

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

import { observable } from 'mobx';

class Store {
  @observable count = 0;
}

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

Actions（动作）

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

-- -------------------- ---- -------
------ - ----------- ------ - ---- -------

----- ----- -
  ----------- ----- - --

  ------- ----------- -
    -------------
  -
-

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

Computed Values（计算值）

计算值是基于可观察状态派生出来的值。它们只有在依赖的状态发生变化时才会重新计算，从而提高性能。例如：

-- -------------------- ---- -------
------ - ----------- -------- - ---- -------

----- ----- -
  ----------- ----- - --

  --------- --- ------------- -
    ------ ---------- - --
  -
-

在这个例子中，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 组件转换为观察者。当组件依赖的可观察状态发生变化时，组件会自动重新渲染。例如：

-- -------------------- ---- -------
------ - -------- - ---- -------------
------ ----- ---- --------

---------
----- ------- ------- --------------- -
  -------- -
    ------ ------------------------------------
  -
-

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