MobX 在 React 中的使用：状态管理的新选择

🤍 前端开发工程师、技术日更博主、已过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 的设计理念是“任何源自应用状态的东西都应该自动地获得”，这使得状态管理变得更加直观和简单。