让 Mbox 6.x 更易上手：简洁三步入门指南！

2023-09-03 20:15:06

前言

Mobx 6.x，这一备受推崇的状态管理库的最新版本，以其简洁性和高效性赢得了开发者的青睐。然而，初学者在踏上 Mobx 之旅时可能会感到不知所措。为了帮助你扫清障碍，我们将通过本指南分解 Mobx 6.x 的基本步骤，让你能够轻松上手。

步骤 1：创建 Mobx 仓库

一个 Mobx 仓库本质上是一个可观察的状态容器。要创建仓库，你可以使用 @observable 装饰器来标记类属性。例如：

import { observable } from "mobx";

class Store {
  @observable name = "John Doe";
  @observable age = 30;
}

你还可以选择不使用 @observable 装饰器，而是通过 makeObservable 函数显式地使类变成可观察对象。

步骤 2：传递 Mobx 仓库

要将仓库提供给 React 组件，你需要通过 Provider 组件将其包裹在应用程序组件周围。这将使所有子组件都可以访问仓库。

import React, { useState, useEffect } from "react";
import { Provider } from "mobx-react";
import Store from "./Store";

const App = () => {
  const store = useState(new Store());

  useEffect(() => {
    return () => {
      store.dispose();
    };
  }, [store]);

  return (
    <Provider store={store}>
      {/* 你的 React 应用 */}
    </Provider>
  );
};

步骤 3：在组件内注入和使用 Mobx

要将 Mobx 仓库注入组件，你可以使用 inject 函数。这会创建一个新的组件，其中包含仓库的引用。

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

const MyComponent = ({ store }) => {
  return (
    <div>
      <h1>{store.name}</h1>
      <p>年龄：{store.age}</p>
    </div>
  );
};

export default inject("store")(MyComponent);