目录
MobX简介
MobX 是一个用于管理应用程序状态的库，它提供了一种简单且可扩展的方式来管理和更新状态。MobX 的核心理念是让状态的管理变得简单、透明和自动化。它使用响应式编程的思想，自动追踪依赖关系，确保当状态发生变化时，相关的视图也会自动更新。
MobX的核心概念
Observable State（可观察状态）
- 定义：在MobX中，状态是指应用程序中可能随时间变化的数据。这些状态可以是简单的值，也可以是复杂的对象或数组。
- 实现：状态通过observable函数或装饰器声明为可观察的，这样当状态发生变化时，所有依赖于这个状态的计算和视图都会自动更新。
Actions（动作）
- 定义：Action是修改状态的唯一途径，它们是纯函数，通常用来封装对状态的更改逻辑。
- 目的：通过明确的Action来修改状态，可以提高代码的可读性和可维护性，同时也便于测试和调试。
Reactions（反应）
- 定义：Reactions是响应状态变化的函数，它们可以是视图组件、计算属性或其他函数。
- 实现：当状态变化时，所有依赖于该状态的Reactions都会自动重新运行，从而更新UI或其他相关部分。
Computed Values（计算属性）
- 定义：Computed values是基于其他状态的派生状态，它们只在依赖的状态发生变化时才重新计算。
- 实现：使用computed函数或装饰器创建，可以极大地优化性能，避免不必要的计算。
Decorators（装饰器）
- 定义：装饰器是ES6语法的一部分，MobX利用装饰器来标记类的属性为可观察的、动作或计算属性。
- 实现：例如，使用@observable、@action和@computed装饰器。
实战示例
让我们通过一个简单的计数器应用来逐步分析MobX的使用：
import { makeAutoObservable, action } from "mobx";
class CounterStore {
count = 0;
constructor() {
makeAutoObservable(this);
}
increment = action(() => {
this.count++;
});
decrement = action(() => {
this.count--;
});
}
const store = new CounterStore();
在这个例子中：
CounterStore类包含了一个count状态，它被makeAutoObservable函数标记为可观察的。increment和decrement方法被标记为action，它们负责更新状态。- 当状态改变时，任何依赖于
store.count的组件或计算属性将自动更新。
使用React与MobX
假设我们有一个React组件，它需要显示计数器的值并提供增加和减少按钮：
import React from 'react';
import { observer } from "mobx-react-lite";
const CounterComponent = observer(({ store }) => (
<div>
<button onClick={store.decrement}>-</button>
<span>{store.count}</span>
<button onClick={store.increment}>+</button>
</div>
));
export default CounterComponent;
这里，observer高阶组件确保了当store.count变化时，CounterComponent会自动重新渲染。
MobX与Redux的对比
状态管理方式
- MobX 使用可观察状态和反应来自动管理状态的变化和更新。
- Redux 使用纯函数 (reducer) 和单一状态树，通过分发动作来管理状态。
数据流
- MobX 允许双向数据绑定，状态和视图之间可以相互影响。
- Redux 强调单向数据流，状态变化通过动作分发到 reducer，生成新的状态。
学习曲线
- MobX 的 API 相对简单，使用装饰器和响应式编程的思想，更容易上手。
- Redux 需要理解动作、reducer、中间件等概念，学习曲线较陡。
开发者工具
- Redux 拥有强大的开发者工具，如 Redux DevTools，方便调试和时间旅行。
- MobX 也有自己的开发者工具 MobX DevTools，但相对来说不如 Redux DevTools 强大。
安装MobX及其相关库
步骤 1：初始化项目
首先，确保你已经安装了 Node.js 和 npm。然后，创建一个新的 React 项目：
npx create-react-app mobx-demo
cd mobx-demo
步骤 2：安装 MobX 和 MobX React
接下来，安装 MobX 和 MobX React 库：
npm install mobx mobx-react-lite
步骤 3：配置 MobX
在项目中创建一个简单的状态管理示例。
src/store/counterStore.js
import { makeObservable, observable, action } from 'mobx';
class CounterStore {
count = 0;
constructor() {
makeObservable(this, {
count: observable,
increment: action,
decrement: action,
});
}
increment() {
this.count += 1;
}
decrement() {
this.count -= 1;
}
}
const counterStore = new CounterStore();
export default counterStore;
src/App.js
import React from 'react';
import { observer } from 'mobx-react-lite';
import counterStore from './store/counterStore';
const App = observer(() => {
return (
<div>
<h1>Counter: {counterStore.count}</h1>
<button onClick={() => counterStore.increment()}>Increment</button>
<button onClick={() => counterStore.decrement()}>Decrement</button>
</div>
);
});
export default App;
步骤 4：运行项目
在项目根目录下运行以下命令启动开发服务器：
npm start
打开浏览器访问 http://localhost:3000，你将看到一个计数器应用。点击按钮可以增加或减少计数值。
完整示例代码
src/store/counterStore.js
import { makeObservable, observable, action } from 'mobx';
class CounterStore {
count = 0;
constructor() {
makeObservable(this, {
count: observable,
increment: action,
decrement: action,
});
}
increment() {
this.count += 1;
}
decrement() {
this.count -= 1;
}
}
const counterStore = new CounterStore();
export default counterStore;
src/App.js
import React from 'react';
import { observer } from 'mobx-react-lite';
import counterStore from './store/counterStore';
const App = observer(() => {
return (
<div>
<h1>Counter: {counterStore.count}</h1>
<button onClick={() => counterStore.increment()}>Increment</button>
<button onClick={() => counterStore.decrement()}>Decrement</button>
</div>
);
});
export default App;
MobX基本使用
创建可观察状态 (Observable State)
在MobX中，创建可观察状态是管理应用状态的第一步。这允许框架跟踪状态的变化，并自动更新依赖于这些状态的组件或计算。
步骤一：引入MobX库
import { observable, action, computed, autorun } from 'mobx';
步骤二：定义可观察状态
// 使用observable函数创建可观察对象
const state = observable({
count: 0,
name: 'John Doe'
});
// 或者使用装饰器
class User {
@observable count = 0;
@observable name = 'John Doe';
}
计算值 (Computed Values) 和它们的自动更新
计算值是在MobX中用于根据当前状态派生新状态的一种机制。它们只在需要时计算，并且当依赖的状态改变时自动更新。
步骤三：定义计算值
// 使用computed函数创建计算值
const fullName = computed(() => `${state.name} Smith`);
// 或者使用装饰器
class User {
@observable name = 'John Doe';
@computed get fullName() {
return `${this.name} Smith`;
}
}
在这个例子中，fullName将自动更新，只要name状态发生变化。
使用observer装饰器或高阶组件使React组件响应式
为了使React组件能够响应MobX中的状态变化，我们需要使用observer装饰器或高阶组件。
步骤四：创建React组件并使其响应式
import React from 'react';
import { observer } from 'mobx-react-lite';
// 使用observer装饰器
@observer
class Counter extends React.Component {
render() {
return (
<div>
<p>Count: {this.props.store.state.count}</p>
<button onClick={() => this.props.store.state.increment()}>Increment</button>
</div>
);
}
}
// 或者使用高阶组件
const ObserverCounter = observer((props) => (
<div>
<p>Count: {props.store.state.count}</p>
<button onClick={() => props.store.state.increment()}>Increment</button>
</div>
));
在这个例子中，每当state.count发生变化时，Counter组件将自动重新渲染，显示最新的计数。
完整示例：MobX与React集成
下面是一个完整的示例，展示了如何在React应用中使用MobX进行状态管理和响应式更新。
// store.js
import { observable, action, computed } from 'mobx';
class CounterStore {
@observable count = 0;
@action increment = () => {
this.count++;
};
@computed get isEven() {
return this.count % 2 === 0;
}
}
const store = new CounterStore();
export default store;
jsx
// App.js
import React from 'react';
import { observer } from 'mobx-react-lite';
import store from './store';
@observer
class App extends React.Component {
render() {
return (
<div>
<h1>Count: {store.count}</h1>
<p>Is Even: {store.isEven ? 'Yes' : 'No'}</p>
<button onClick={store.increment}>Increment</button>
</div>
);
}
}
export default App;
在这个示例中：
- 创建可观察状态：
CounterStore类定义了count状态和increment方法。 - 定义计算值：
isEven是一个计算属性，它根据count的值判断是否为偶数。 - 创建响应式组件：
App组件使用observer装饰器，当store.count或store.isEven发生变化时，组件将自动更新。
扫一扫
2077
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
