Mobx 由浅入深理解

## 概述

MobX 是一款基于响应式编程范式的 JavaScript 状态管理库。它允许您定义可观察的状态，当状态发生变化时，MobX 会自动更新任何依赖该状态的组件。这使得您可以轻松地构建响应式的用户界面，而无需担心手动管理状态。

## MobX 的基本概念

### 可观察状态

可观察状态是 MobX 的核心概念。它是一种特殊的数据结构，当其值发生变化时，MobX 会自动更新任何依赖该状态的组件。要创建一个可观察状态，可以使用 `observable` 函数。例如：

```javascript
import { observable } from "mobx";

class Counter {
  @observable count = 0;
}

计算属性

计算属性是另一种 MobX 的核心概念。计算属性是根据其他可观察状态的值计算出来的值。要创建一个计算属性，可以使用 computed 函数。例如：

class Counter {
  @observable count = 0;

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

动作

动作是 MobX 中用于修改可观察状态的方法。要创建一个动作，可以使用 action 函数。例如：

class Counter {
  @observable count = 0;

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

反应式编程

反应式编程是 MobX 的编程范式。在反应式编程中，当可观察状态发生变化时，MobX 会自动更新任何依赖该状态的组件。这使得您可以轻松地构建响应式的用户界面，而无需担心手动管理状态。

使用 MobX 构建 React 应用程序

以下是如何使用 MobX 来构建一个简单的 React 应用程序的示例：

1. 安装 MobX 和 React

npm install mobx react

2. 创建一个 MobX 存储

import { observable, action, computed } from "mobx";

class CounterStore {
  @observable count = 0;

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

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

const store = new CounterStore();

3. 将 MobX 存储连接到 React 组件

import React from "react";
import { observer } from "mobx-react";

const Counter = observer(() => (
  <div>
    <h1>Count: {store.count}</h1>
    <button onClick={store.increment}>Increment</button>
  </div>
));

4. 渲染 React 组件

ReactDOM.render(<Counter />, document.getElementById("root"));

现在，当您点击按钮时，MobX 会自动更新计数器组件，而无需您手动管理状态。

总结

MobX 是一款功能强大且易于使用的状态管理库。它可以帮助您轻松地构建响应式的用户界面，而无需担心手动管理状态。如果你正在寻找一种简单而强大的方式来管理 JavaScript 应用程序的状态，那么 MobX 是一个不错的选择。