MobX 是一个轻量级的状态管理库，专为 React 应用设计，旨在简化状态管理的复杂度。与 Redux 相比，MobX 提供了更简洁、更灵活的 API，强调了观察与响应的模式，使得状态更新更加直观和高效。MobX 的核心概念包括 observable、computed 和 reaction，这些概念使得状态管理更加自然和高效。相比其他状态管理工具，MobX 更注重于减少代码的复杂性，让开发者能够更加专注于应用的核心功能。
简洁与灵活的API
MobX 强调简洁与灵活性，其 API 设计便于集成到现有代码中，无需复杂的状态管理方案。通过 observer、computed 和 reaction 等特性，开发者能轻松实现响应式的状态管理机制，减少重复的副作用代码，提升代码可维护性。
直观的响应式更新
相较于 Redux 等其他管理库，MobX 使用更直观的方式管理状态。当 observable 属性发生变化时，所有依赖其的 computed 和 reaction 自动执行更新，无需手动触发。
性能优化与测试兼容
MobX 具备性能优化特性和兼容自动化测试的能力，使得开发者在构建复杂应用时，既能提升代码效率，又能保证测试覆盖度。
环境搭建为了开始使用 MobX，确保你的开发环境配置了 Node.js 和 npm。通过执行以下步骤进行项目初始化：
npx create-react-app my-mobx-app
cd my-mobx-app接下来，通过以下命令安装 MobX 及其相关依赖：
npm install mobx @mobx/react-utils引入 mobx-react 来集成 React 和 MobX，以实现组件与可观察对象之间的无缝连接：
import { observer, computed } from 'mobx-react';observer, computed, reaction
observable
observable 是 MobX 中的核心概念，用于表示状态的可观察对象。当其属性值改变时，所有依赖于该属性的 computed 和 reaction 会自动更新：
import { observable } from 'mobx';
class Counter {
@observable count = 0;
}
const counter = new Counter();computed
computed 属性用于计算依赖于 observable 的属性值，即使其逻辑复杂， computed 也能确保响应式更新：
class Counter {
@observable count = 0;
@computed get doubleCount() {
return this.count * 2;
}
}
const counter = new Counter();
console.log(counter.doubleCount); // 输出 0
counter.count = 10;
console.log(counter.doubleCount); // 输出 20reaction
reaction 用于监听特定表达式的更改，并在需要时执行回调函数，无需修改 observable 和 computed 的响应性：
import { reaction } from 'mobx';
class Counter {
@observable count = 0;
@computed get doubleCount() {
return this.count * 2;
}
@reaction(() => this.doubleCount, (d) => {
console.log(`Double count changed to: ${d}`);
});
}
const counter = new Counter();
counter.count = 10;基于上述概念，创建一个简单的计数器应用：
import React from 'react';
import { observer, computed } from 'mobx-react';
import { observable, action } from 'mobx';
class CounterStore {
@observable count = 0;
@action increment = () => {
this.count++;
};
@computed get doubleCount() {
return this.count * 2;
}
}
const Counter = observer(({ store }) => {
const { count, increment, doubleCount } = store;
return (
<div>
<button onClick={increment}>Increment</button>
<p>Count: {count}</p>
<p>Double Count: {doubleCount}</p>
</div>
);
});
const App = () => {
const store = observable.newCounterStore();
return <Counter store={store} />;
};
export default App;性能优化
在处理计算密集型操作时，reaction 可以帮助优化性能：
import { reaction } from 'mobx';
class ComplexCounter {
@observable complexValue = 0;
@computed get expensiveCalculation() {
// 模拟一个复杂的计算任务
return (this.complexValue * Math.pow(2, this.complexValue));
}
// 在 complexValue 更改时执行计算
@reaction(() => this.expensiveCalculation, (value) => {
console.log(`Calculated value: ${value}`);
});
}
const counter = new ComplexCounter();
counter.complexValue = 10;自动化测试
确保 observable 和 computed 的响应性对于编写易于维护的测试代码至关重要：
import { expect } from 'chai';
import { shallow } from 'enzyme';
import { mount } from 'enzyme';
import React from 'react';
import { Provider } from 'mobx-react';
import CounterStore from './CounterStore';
describe('Counter', () => {
it('should increment the count and update the double count', () => {
const store = observable.newCounterStore();
const wrapper = shallow(
<Provider store={store}>
<Counter />
</Provider>
);
store.increment();
expect(store.count).to.equal(1);
expect(store.doubleCount).to.equal(2);
store.increment();
expect(store.count).to.equal(2);
expect(store.doubleCount).to.equal(4);
});
});实现一个基本的 Todo 应用，展示 MobX 在实际场景中的应用：
// TodoStore.js
import { observable, action, computed } from 'mobx';
class TodoStore {
@observable todos = [];
@observable addingTodo = false;
@action addTodo = (text) => {
this.todos.push({ id: Date.now(), text, done: false });
this.addingTodo = false;
};
@action toggleTodo = (id) => {
this.todos = this.todos.map(todo => ({
...todo,
done: todo.id === id ? !todo.done : todo.done
}));
};
@action removeTodo = (id) => {
this.todos = this.todos.filter(todo => todo.id !== id);
};
@computed get incompleteTodos() {
return this.todos.filter(todo => !todo.done);
};
@computed get completedTodos() {
return this.todos.filter(todo => todo.done);
};
@computed get incompleteCount() {
return this.incompleteTodos.length;
};
@computed get completedCount() {
return this.completedTodos.length;
};
@computed get incompleteWeight() {
return this.incompleteTodos.reduce((acc, todo) => acc + todo.weight || 0, 0);
};
}
export default TodoStore;// TodoList.js
import React from 'react';
import { observer } from 'mobx-react';
import { Button, Input } from 'antd';
import TodoStore from '../TodoStore';
const TodoList = observer(({ store }) => {
const { todos, addTodo, toggleTodo, removeTodo } = store;
return (
<div>
<Input
placeholder="添加任务"
onPressEnter={addTodo}
value={store.addingTodo}
/>
<ul>
{todos.map(todo => (
<li key={todo.id}>
{todo.text}
<Button type="primary" onClick={() => toggleTodo(todo.id)}>
{todo.done ? '已完成' : '完成'}
</Button>
<Button type="danger" onClick={() => removeTodo(todo.id)}>
删除
</Button>
</li>
))}
</ul>
</div>
);
});
export default TodoList;通过上述示例，你能够看到 MobX 如何通过简洁的 API 和响应式管理简化状态，从而在不同的场景中提供高效、直观的开发体验。无论是简单的计数器应用，还是复杂的 Todo 应用，MobX 都能显著提升开发效率和代码可读性，让开发者专注于构建功能丰富的应用。
随时随地看视频
