🤍 前端開發工程師、技術日更博主、已過CET6
🍨 阿珊和她的貓_CSDN博客專家、23年度博客之星前端領域TOP1
🕠 牛客高級專題作者、打造專欄《前端面試必備》 、《2024面試高頻手撕題》、《前端求職突破計劃》
🍚 藍橋云課簽約作者、上架課程《Vue.js 和 Egg.js 開發企業級健康管理項目》、《帶你從入門到實戰全面掌握 uni-app》

引言

MobX 是一個簡單、可擴展的狀態管理庫，它通過透明的函數響應式編程（TFRP）使得狀態管理變得簡單和可擴展。MobX 可以與 React 無縫集成，提供了一種不同于 Redux 的狀態管理方案。本文將介紹如何在 React 應用中使用 MobX 來管理狀態。

安裝 MobX 和 MobX React

首先，你需要安裝 mobx 和 mobx-react 這兩個庫：

npm install mobx mobx-react
# 或者
yarn add mobx mobx-react

創建 MobX Store

創建一個文件 store.js 來定義你的 MobX store：

// store.js
import { observable, action, makeObservable } from 'mobx';class Store {count = 0;constructor() {makeObservable(this, {count: observable,increment: action,decrement: action,});}increment() {this.count += 1;}decrement() {this.count -= 1;}
}const store = new Store();
export default store;

在上面的代碼中，我們定義了一個 Store 類，它有一個可觀察的狀態 count 和兩個動作 increment 和 decrement 來改變這個狀態。

在 React 組件中使用 MobX Store

使用 observer 高階組件包裝你的 React 組件，使其能夠響應 MobX store 中的狀態變化：

// MyComponent.js
import React from 'react';
import { observer } from 'mobx-react';
import store from './store';const MyComponent = observer(() => {return (<div><h1>Count: {store.count}</h1><button onClick={() => store.increment()}>Increment</button><button onClick={() => store.decrement()}>Decrement</button></div>);
});export default MyComponent;

在上面的代碼中，observer 函數使得 MyComponent 組件能夠響應 store.count 的變化，并重新渲染組件。

使用 React Hooks 和 MobX

如果你更喜歡使用函數組件和 Hooks，可以使用 useObserver Hook 來響應狀態變化：

// MyComponentWithHooks.js
import React from 'react';
import { useObserver } from 'mobx-react-lite';
import store from './store';const MyComponentWithHooks = () => {return useObserver(() => (<div><h1>Count: {store.count}</h1><button onClick={() => store.increment()}>Increment</button><button onClick={() => store.decrement()}>Decrement</button></div>));
};export default MyComponentWithHooks;

結論

MobX 提供了一種簡單而強大的方式來管理 React 應用中的狀態。通過將狀態和動作封裝在 store 中，并使用 observer 或 useObserver 來使組件響應狀態變化，你可以輕松地實現可預測的狀態管理。MobX 的設計理念是“任何源自應用狀態的東西都應該自動地獲得”，這使得狀態管理變得更加直觀和簡單。