当前位置：首页 > news >正文

MobX与响应式编程实践

news 来源：原创 2025/6/8 8:09:51

响应式编程基础

MobX 是一个简洁高效的状态管理库，它通过响应式编程范式实现了状态与UI的自动同步。核心优势在于其简单直观的API和出色的开发体验。

核心概念

// 定义可观察状态
import { makeObservable, observable, action, computed } from "mobx";class TodoStore {constructor() {makeObservable(this, {todos: observable,unfinishedTodoCount: computed,addTodo: action,toggleTodo: action});}todos = [];get unfinishedTodoCount() {return this.todos.filter(todo => !todo.finished).length;}addTodo(title) {this.todos.push({ id: Date.now(), title, finished: false });}toggleTodo(id) {const todo = this.todos.find(todo => todo.id === id);if (todo) {todo.finished = !todo.finished;}}
}

MobX响应式原理解析

自动依赖追踪机制

MobX的核心魔力在于其精确的依赖追踪系统。当组件渲染或计算属性执行时，MobX会自动收集它们读取的可观察状态，并在这些状态发生变化时重新计算和渲染。

import { makeAutoObservable, autorun } from "mobx";class TemperatureStore {constructor() {makeAutoObservable(this);}temperatureCelsius = 25;get temperatureFahrenheit() {console.log("Computing Fahrenheit");return this.temperatureCelsius * 1.8 + 32;}setTemperatureCelsius(value) {this.temperatureCelsius = value;}
}const temperature = new TemperatureStore();// 创建自动执行的反应
const dispose = autorun(() => {console.log(`Temperature: ${temperature.temperatureFahrenheit}°F`);
});// 当温度变化时，自动重新计算并打印
temperature.setTemperatureCelsius(30);// 停止自动执行
dispose();

实现原理：Proxy与依赖图

MobX 6使用JavaScript的Proxy特性实现数据劫持，当读取observable属性时，MobX会将当前执行上下文（如autorun或组件渲染）注册为该属性的订阅者。通过维护一个动态依赖图，MobX确保只有真正依赖变化数据的计算才会重新执行。
Ran tool

与Redux的深度对比分析

思维模型与状态管理理念

特性	MobX	Redux
状态模型	多个独立状态树，OOP风格	单一状态树，函数式风格
修改方式	直接修改（通过action）	不可变更新（reducer）
模板代码	少，直观	较多，规范化
学习曲线	平缓	陡峭
调试能力	中等	优秀（时间旅行等）
适用规模	小到中型应用	中到大型应用

代码对比：同一功能两种实现

MobX实现:

// store.js
import { makeAutoObservable } from "mobx";class CounterStore {count = 0;constructor() {makeAutoObservable(this);}increment() {this.count++;}decrement() {this.count--;}reset() {this.count = 0;}
}export const counterStore = new CounterStore();// Counter.jsx
import React from "react";
import { observer } from "mobx-react-lite";
import { counterStore } from "./store";const Counter = observer(() => {return (<div><h2>Count: {counterStore.count}</h2><button onClick={() => counterStore.increment()}>+</button><button onClick={() => counterStore.decrement()}>-</button><button onClick={() => counterStore.reset()}>Reset</button></div>);
});export default Counter;

Redux实现:

// store.js
import { createSlice, configureStore } from "@reduxjs/toolkit";const counterSlice = createSlice({name: "counter",initialState: { count: 0 },reducers: {increment: state => {state.count++;},decrement: state => {state.count--;},reset: state => {state.count = 0;}}
});export const { increment, decrement, reset } = counterSlice.actions;
export const store = configureStore({reducer: {counter: counterSlice.reducer}
});// Counter.jsx
import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement, reset } from "./store";const Counter = () => {const count = useSelector(state => state.counter.count);const dispatch = useDispatch();return (<div><h2>Count: {count}</h2><button onClick={() => dispatch(increment())}>+</button><button onClick={() => dispatch(decrement())}>-</button><button onClick={() => dispatch(reset())}>Reset</button></div>);
};export default Counter;

性能比较

MobX通过精确的依赖追踪和细粒度更新提供出色的默认性能，而Redux需要开发者手动优化（如memoization）以避免不必要的重渲染。

高级MobX模式与技巧

组合式Store设计

import { makeAutoObservable } from "mobx";// 领域store: 用户
class UserStore {user = null;loading = false;error = null;constructor(rootStore) {makeAutoObservable(this);this.rootStore = rootStore;}async login(credentials) {this.loading = true;this.error = null;try {const response = await fetch("/api/login", {method: "POST",headers: { "Content-Type": "application/json" },body: JSON.stringify(credentials)});if (!response.ok) throw new Error("Login failed");this.user = await response.json();} catch (err) {this.error = err.message;} finally {this.loading = false;}}logout() {this.user = null;// 可以访问其他storethis.rootStore.cartStore.clearCart();}
}// 领域store: 购物车
class CartStore {items = [];constructor(rootStore) {makeAutoObservable(this);this.rootStore = rootStore;}addItem(item) {this.items.push(item);}clearCart() {this.items = [];}get totalPrice() {return this.items.reduce((sum, item) => sum + item.price, 0);}get isUserLoggedIn() {return !!this.rootStore.userStore.user;}
}// 根store
class RootStore {constructor() {this.userStore = new UserStore(this);this.cartStore = new CartStore(this);}
}export const rootStore = new RootStore();

避免响应式陷阱

1. 避免在渲染过程中修改状态

// ❌ 错误：在render过程中修改状态
const TodoList = observer(() => {if (todoStore.todos.length === 0) {todoStore.initializeTodos(); // 会导致无限循环!}return (<ul>{todoStore.todos.map(todo => <li key={todo.id}>{todo.title}</li>)}</ul>);
});// ✅ 正确：使用React的生命周期或效果
const TodoList = observer(() => {const { todos, initializeTodos } = todoStore;React.useEffect(() => {if (todos.length === 0) {initializeTodos();}}, [todos.length, initializeTodos]);return (<ul>{todos.map(todo => <li key={todo.id}>{todo.title}</li>)}</ul>);
});

2. 确保组件只观察它需要的数据

// ❌ 低效：整个组件对store中的所有变化都做出反应
const ProfilePage = observer(() => {const { userStore } = useStores();return (<div><h1>{userStore.user.name}</h1><span>{userStore.user.email}</span><ActivityFeed activities={userStore.activities} /></div>);
});// ✅ 优化：拆分组件，精确控制观察范围
const ProfileHeader = observer(() => {const { userStore } = useStores();const { name, email } = userStore.user;return (<div><h1>{name}</h1><span>{email}</span></div>);
});const ActivitySection = observer(() => {const { userStore } = useStores();return <ActivityFeed activities={userStore.activities} />;
});const ProfilePage = () => (<div><ProfileHeader /><ActivitySection /></div>
);

3. 使用`runInAction`处理异步操作

import { makeAutoObservable, runInAction } from "mobx";class DataStore {data = [];loading = false;error = null;constructor() {makeAutoObservable(this);}async fetchData() {this.loading = true;this.error = null;try {const response = await fetch("/api/data");const result = await response.json();// 使用runInAction将多个状态更新包装在一个事务中runInAction(() => {this.data = result;this.loading = false;});} catch (error) {runInAction(() => {this.error = error.message;this.loading = false;});}}
}

案例：构建高性能复杂表单

需求与挑战

开发一个复杂的动态表单，包含多级嵌套字段、条件验证和即时计算。表单需要高性能且响应式，同时保持良好的可维护性。

MobX表单实现

import { makeAutoObservable, reaction } from "mobx";class FormField {value = "";touched = false;error = null;constructor(initialValue = "", validations = []) {this.value = initialValue;this.validations = validations;makeAutoObservable(this);}setValue(newValue) {this.value = newValue;this.touched = true;this.validate();}validate() {for (const validation of this.validations) {const error = validation(this.value);if (error) {this.error = error;return false;}}this.error = null;return true;}reset() {this.value = "";this.touched = false;this.error = null;}
}class FormStore {constructor() {makeAutoObservable(this);// 设置字段间的依赖关系reaction(() => this.shippingAddress.sameAsBilling.value,sameAsBilling => {if (sameAsBilling) {this.shippingAddress.street.setValue(this.billingAddress.street.value);this.shippingAddress.city.setValue(this.billingAddress.city.value);this.shippingAddress.zipCode.setValue(this.billingAddress.zipCode.value);}});}// 使用嵌套结构组织表单字段personalInfo = {firstName: new FormField("", [value => !value ? "First name is required" : null]),lastName: new FormField("", [value => !value ? "Last name is required" : null]),email: new FormField("", [value => !value ? "Email is required" : null,value => !/\S+@\S+\.\S+/.test(value) ? "Invalid email format" : null])};billingAddress = {street: new FormField("", [value => !value ? "Street is required" : null]),city: new FormField("", [value => !value ? "City is required" : null]),zipCode: new FormField("", [value => !value ? "ZIP code is required" : null,value => !/^\d{5}(-\d{4})?$/.test(value) ? "Invalid ZIP code" : null])};shippingAddress = {sameAsBilling: new FormField(false),street: new FormField(""),city: new FormField(""),zipCode: new FormField("")};payment = {cardNumber: new FormField("", [value => !value ? "Card number is required" : null,value => !/^\d{16}$/.test(value.replace(/\s/g, "")) ? "Invalid card number" : null]),expiryDate: new FormField("", [value => !value ? "Expiry date is required" : null,value => !/^(0[1-9]|1[0-2])\/\d{2}$/.test(value) ? "Invalid format (MM/YY)" : null]),cvv: new FormField("", [value => !value ? "CVV is required" : null,value => !/^\d{3,4}$/.test(value) ? "Invalid CVV" : null])};get isFormValid() {// 递归验证所有表单字段const validateSection = section => {return Object.values(section).every(field => {if (field instanceof FormField) {return field.validate();} else if (typeof field === "object") {return validateSection(field);}return true;});};return validateSection(this);}submit() {if (!this.isFormValid) {console.error("Form has validation errors");return false;}// 收集表单数据const formData = {personalInfo: {firstName: this.personalInfo.firstName.value,lastName: this.personalInfo.lastName.value,email: this.personalInfo.email.value},billingAddress: {street: this.billingAddress.street.value,city: this.billingAddress.city.value,zipCode: this.billingAddress.zipCode.value},shippingAddress: this.shippingAddress.sameAsBilling.value? {sameAsBilling: true,...this.billingAddress}: {sameAsBilling: false,street: this.shippingAddress.street.value,city: this.shippingAddress.city.value,zipCode: this.shippingAddress.zipCode.value},payment: {cardNumber: this.payment.cardNumber.value,expiryDate: this.payment.expiryDate.value,cvv: this.payment.cvv.value}};console.log("Form submitted:", formData);return true;}reset() {const resetSection = section => {Object.values(section).forEach(field => {if (field instanceof FormField) {field.reset();} else if (typeof field === "object") {resetSection(field);}});};resetSection(this);}
}export const formStore = new FormStore();

表单组件实现

import React from "react";
import { observer } from "mobx-react-lite";
import { formStore } from "./formStore";// 字段组件
const Field = observer(({ field, label, type = "text" }) => {return (<div className="form-field"><label>{label}</label><inputtype={type}value={field.value}onChange={e => field.setValue(e.target.value)}className={field.error && field.touched ? "error" : ""}/>{field.error && field.touched && (<div className="error-message">{field.error}</div>)}</div>);
});// 复选框组件
const Checkbox = observer(({ field, label }) => {return (<div className="form-checkbox"><inputtype="checkbox"checked={field.value}onChange={e => field.setValue(e.target.checked)}id={`checkbox-${label}`}/><label htmlFor={`checkbox-${label}`}>{label}</label></div>);
});// 表单组件
const CheckoutForm = observer(() => {const handleSubmit = e => {e.preventDefault();if (formStore.submit()) {alert("Order placed successfully!");}};return (<form onSubmit={handleSubmit} className="checkout-form"><h2>Personal Information</h2><div className="form-section"><Fieldfield={formStore.personalInfo.firstName}label="First Name"/><Fieldfield={formStore.personalInfo.lastName}label="Last Name"/><Fieldfield={formStore.personalInfo.email}label="Email"type="email"/></div><h2>Billing Address</h2><div className="form-section"><Fieldfield={formStore.billingAddress.street}label="Street Address"/><Fieldfield={formStore.billingAddress.city}label="City"/><Fieldfield={formStore.billingAddress.zipCode}label="ZIP Code"/></div><h2>Shipping Address</h2><div className="form-section"><Checkboxfield={formStore.shippingAddress.sameAsBilling}label="Same as Billing Address"/>{!formStore.shippingAddress.sameAsBilling.value && (<><Fieldfield={formStore.shippingAddress.street}label="Street Address"/><Fieldfield={formStore.shippingAddress.city}label="City"/><Fieldfield={formStore.shippingAddress.zipCode}label="ZIP Code"/></>)}</div><h2>Payment Information</h2><div className="form-section"><Fieldfield={formStore.payment.cardNumber}label="Card Number"/><Fieldfield={formStore.payment.expiryDate}label="Expiry Date (MM/YY)"/><Fieldfield={formStore.payment.cvv}label="CVV"type="password"/></div><div className="form-actions"><button type="button" onClick={() => formStore.reset()}>Reset</button><buttontype="submit"disabled={!formStore.isFormValid}>Place Order</button></div></form>);
});export default CheckoutForm;

扩展与集成

与React hooks结合

// useStore.js - 创建自定义hook访问stores
import React from "react";
import { rootStore } from "./stores";// React context用于提供stores
const StoreContext = React.createContext(null);// Provider组件
export const StoreProvider = ({ children }) => {return (<StoreContext.Provider value={rootStore}>{children}</StoreContext.Provider>);
};// 自定义hook用于访问stores
export const useStores = () => {const store = React.useContext(StoreContext);if (!store) {throw new Error("useStores must be used within a StoreProvider");}return store;
};// 方便访问特定store的hooks
export const useUserStore = () => useStores().userStore;
export const useCartStore = () => useStores().cartStore;

配合TypeScript提升类型安全

// store.ts
import { makeAutoObservable } from "mobx";interface Todo {id: number;title: string;completed: boolean;
}class TodoStore {todos: Todo[] = [];constructor() {makeAutoObservable(this);}addTodo(title: string): void {this.todos.push({id: Date.now(),title,completed: false});}toggleTodo(id: number): void {const todo = this.todos.find(todo => todo.id === id);if (todo) {todo.completed = !todo.completed;}}removeTodo(id: number): void {this.todos = this.todos.filter(todo => todo.id !== id);}get completedCount(): number {return this.todos.filter(todo => todo.completed).length;}get remainingCount(): number {return this.todos.length - this.completedCount;}
}export const todoStore = new TodoStore();

性能优化

1. 精细组件粒度

将大型组件拆分为小型组件，每个组件只观察它所需的状态部分，避免不必要的重渲染。

2. 使用`computed`避免重复计算

class ShoppingCartStore {items = [];taxRate = 0.08;constructor() {makeAutoObservable(this);}// 使用computed缓存计算结果get subtotal() {console.log("Computing subtotal"); // 只有items变化时才会执行return this.items.reduce((sum, item) => sum + item.price * item.quantity, 0);}get tax() {return this.subtotal * this.taxRate;}get total() {return this.subtotal + this.tax;}
}

3. 优化大型列表渲染

import { observer } from "mobx-react-lite";
import { useCallback } from "react";// 优化大型列表：单独的列表项组件
const TodoItem = observer(({ todo, onToggle, onDelete }) => {console.log(`Rendering TodoItem: ${todo.id}`);return (<li><inputtype="checkbox"checked={todo.completed}onChange={onToggle}/><span style={{ textDecoration: todo.completed ? "line-through" : "none" }}>{todo.title}</span><button onClick={onDelete}>Delete</button></li>);
});// 列表容器组件
const TodoList = observer(({ todoStore }) => {console.log("Rendering TodoList");const handleToggle = useCallback((id) => {todoStore.toggleTodo(id);}, [todoStore]);const handleDelete = useCallback((id) => {todoStore.removeTodo(id);}, [todoStore]);return (<div><h2>Todo List ({todoStore.remainingCount} remaining)</h2><ul>{todoStore.todos.map(todo => (<TodoItemkey={todo.id}todo={todo}onToggle={() => handleToggle(todo.id)}onDelete={() => handleDelete(todo.id)}/>))}</ul></div>);
});