掌握 MobX：React 的簡化反應式狀態管理-js教程-PHP中文網

Mastering MobX: Simplified and Reactive State Management for React

MobX：一個簡單且可擴充的 React 狀態管理解決方案

MobX 是一個流行的 JavaScript 應用程式狀態管理函式庫，尤其是在 React 中。與依賴集中儲存和明確操作調度的 Redux 不同，MobX 採用更具反應性的方法來管理狀態。它透過追蹤依賴關係並在狀態更改時僅重新渲染應用程式的必要部分來自動更新應用程式的狀態和 UI。

在本指南中，我們將介紹 MobX 的關鍵概念、如何使用 React 設定它，以及如何在 React 應用程式中有效地使用它進行狀態管理。

1.什麼是 MobX？

MobX 是一個狀態管理函式庫，它利用反應式程式設計來管理應用程式的狀態。它會自動追蹤和更新 UI 中依賴狀態的部分，使其成為管理應用程式資料的非常高效且直觀的方式。

MobX 的主要特性：

自動依賴追蹤：MobX 自動追蹤應用程式的哪些部分依賴哪些狀態。
簡單直覺：使用 MobX，您不需要手動排程操作或更新狀態。 MobX 會自動對狀態變化做出反應。
聲明式：MobX 使用可觀察的方法，您可以將狀態定義為 observable，當狀態改變時，您的元件會自動重新渲染。
效能最佳化：MobX 僅更新依賴更改狀態的元件，從而實現高度最佳化的效能。

2. MobX 的核心概念

MobX 圍繞著幾個共同管理狀態的核心概念建構：

1.可觀察狀態

可觀察狀態是 MobX 的核心。當一個物件被標記為 observable 時，MobX 會追蹤該物件的狀態並自動更新依賴它的元件。

範例：

import { observable } from 'mobx';

const counter = observable({
  value: 0,
  increment() {
    this.value++;
  },
  decrement() {
    this.value--;
  },
});

登入後複製

可觀察裝飾器使計數器物件具有反應性。每當值發生變化時，任何使用此狀態的 React 元件都會自動重新渲染。

2.行動

MobX 中的操作是修改狀態的函數。按照慣例，應該使用操作來更新可觀察的狀態，因為 MobX 確保狀態以受控和可預測的方式更新。

範例：

import { observable } from 'mobx';

const counter = observable({
  value: 0,
  increment() {
    this.value++;
  },
  decrement() {
    this.value--;
  },
});

登入後複製

增量和減量方法是使用動作裝飾器定義的動作。這些方法修改狀態。

3.計算值

計算值源自可觀察狀態。當可觀察狀態改變時，計算值會自動重新計算，確保應用程式的狀態一致。

範例：

import { action } from 'mobx';

const counter = observable({
  value: 0,
  increment: action(function () {
    this.value++;
  }),
  decrement: action(function () {
    this.value--;
  }),
});

登入後複製

doubleValue 是從可觀察值派生的計算值。每當值改變時，就會重新計算 doubleValue。

4.反應

反應是每當可觀察值改變時就會發生的副作用。反應對於根據狀態變化觸發操作非常有用。

範例：

import { computed } from 'mobx';

const counter = observable({
  value: 0,
  increment() {
    this.value++;
  },
  decrement() {
    this.value--;
  },
  get doubleValue() {
    return this.value * 2;
  },
});

登入後複製

autorun 函數是一種在 counter.value 發生變化時自動執行的反應。它將更新的計數器值記錄到控制台。

3.將 MobX 與 React 整合

MobX 與 React 無縫整合來管理應用程式的狀態。在 React 中，MobX 透過使用 observer 高階元件來追蹤狀態變化並在必要時自動更新 UI。

第 1 步：安裝 MobX 和 React-MobX

要在 React 應用程式中使用 MobX，您需要安裝 mobx 和 mobx-react：

import { autorun } from 'mobx';

const counter = observable({
  value: 0,
  increment() {
    this.value++;
  },
  decrement() {
    this.value--;
  },
});

autorun(() => {
  console.log(`Counter value is: ${counter.value}`);
});

登入後複製

第 2 步：建立一個 Observable Store

建立一個保存應用程式狀態的儲存。該存儲將是可觀察的，並且組件可以對其更改做出反應。

範例：

npm install mobx mobx-react

登入後複製

CounterStore 類別定義可觀察的狀態（值）和操作（遞增和遞減）。

第3步：製作React元件觀察者

要將 React 元件連接到 MobX，您需要使用 mobx-react 中的觀察者高階元件。這將允許您的元件在可觀察狀態變更時自動重新渲染。

範例：

import { observable, action } from 'mobx';

class CounterStore {
  @observable value = 0;

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

  @action decrement() {
    this.value--;
  }
}

export const counterStore = new CounterStore();

登入後複製

Counter 元件用觀察者包裝，這使得它能夠對 counterStore 中的變更做出反應。當 counterStore.value 發生變化時，React 會自動重新渲染元件以反映新值。

第 4 步：在您的應用程式中使用商店

現在您的商店已設定完畢並且您的組件已被觀察者包裝，您可以在應用程式中使用該商店：

import { observable } from 'mobx';

const counter = observable({
  value: 0,
  increment() {
    this.value++;
  },
  decrement() {
    this.value--;
  },
});

登入後複製