面试题手册

MobX 是一个功能强大的状态管理库，但在使用过程中可能会遇到一些常见问题。了解这些问题及其解决方案可以帮助开发者更好地使用 MobX。1. 组件不更新问题描述组件使用 observer 包装，但状态变化时组件不更新。常见原因和解决方案原因 1：访问的是普通对象而不是 observable// 错误const store = { count: 0};@observerclass Counter extends React.Component { render() { return <div>{store.count}</div>; // 不会更新 }}// 正确import { observable } from 'mobx';const store = observable({ count: 0});@observerclass Counter extends React.Component { render() { return <div>{store.count}</div>; // 会更新 }}原因 2：在 action 外修改状态（MobX 6）// 错误（MobX 6）class Store { @observable count = 0; increment() { this.count++; // 不在 action 中，会报错 }}// 正确class Store { @observable count = 0; @action increment() { this.count++; // 在 action 中 }}原因 3：在 render 中创建新对象// 错误@observerclass Component extends React.Component { render() { const style = { color: 'red' }; // 每次渲染都创建新对象 return <div style={style}>{store.count}</div>; }}// 正确const style = { color: 'red' }; // 在组件外部定义@observerclass Component extends React.Component { render() { return <div style={style}>{store.count}</div>; }}2. 性能问题问题描述应用性能下降，组件频繁重新渲染。常见原因和解决方案原因 1：过度追踪// 错误：在循环中访问 observable@observerclass List extends React.Component { render() { return ( <div> {store.items.map(item => ( <div key={item.id}> {item.name} - {item.value} - {item.description} </div> ))} </div> ); }}// 正确：使用 computed 预处理数据class Store { @observable items = []; @computed get itemDisplayData() { return this.items.map(item => ({ id: item.id, display: `${item.name} - ${item.value} - ${item.description}` })); }}@observerclass List extends React.Component { render() { return ( <div> {store.itemDisplayData.map(item => ( <div key={item.id}>{item.display}</div> ))} </div> ); }}原因 2：组件依赖太多状态// 错误：组件依赖太多状态@observerclass Dashboard extends React.Component { render() { return ( <div> <UserInfo /> <Settings /> <DataCount /> </div> ); }}// 正确：拆分为多个组件@observerclass UserInfo extends React.Component { render() { return ( <div> <div>{store.user.name}</div> <div>{store.user.email}</div> </div> ); }}3. 内存泄漏问题描述组件卸载后，reaction 仍然在运行，导致内存泄漏。解决方案// 错误：忘记清理 reactionuseEffect(() => { autorun(() => { console.log(store.count); });}, []);// 正确：清理 reactionuseEffect(() => { const dispose = autorun(() => { console.log(store.count); }); return () => { dispose(); // 清理 reaction };}, []);4. 异步操作问题问题描述异步操作中的状态修改不生效。解决方案// 错误：异步操作中的状态修改@actionasync fetchData() { this.loading = true; const data = await fetch('/api/data').then(r => r.json()); this.data = data; // 不在 action 中 this.loading = false; // 不在 action 中}// 正确：使用 runInAction@actionasync fetchData() { this.loading = true; try { const data = await fetch('/api/data').then(r => r.json()); runInAction(() => { this.data = data; }); } finally { runInAction(() => { this.loading = false; }); }}// 或者使用 flowfetchData = flow(function* () { this.loading = true; try { const response = yield fetch('/api/data'); const data = yield response.json(); this.data = data; } finally { this.loading = false; }});5. computed 不更新问题描述computed 属性没有按预期更新。常见原因和解决方案原因 1：在 computed 中产生副作用// 错误：在 computed 中产生副作用@computed get badComputed() { console.log('Side effect!'); // 不应该在 computed 中 fetch('/api/data'); // 不应该在 computed 中 return this.data;}// 正确：computed 应该是纯函数@computed get goodComputed() { return this.data.filter(item => item.active);}原因 2：依赖项没有正确追踪// 错误：依赖项没有正确追踪@computed get badComputed() { const data = this.data; // 没有在返回值中使用 return this.items.length;}// 正确：依赖项正确追踪@computed get goodComputed() { return this.data.length + this.items.length;}6. 循环依赖问题描述多个 store 之间存在循环依赖，导致无限循环或性能问题。解决方案// 错误：循环依赖class StoreA { @observable value = 0; @computed get doubled() { return storeB.value * 2; }}class StoreB { @observable value = 0; @computed get doubled() { return storeA.value * 2; }}// 正确：避免循环依赖class Store { @observable valueA = 0; @observable valueB = 0; @computed get doubledA() { return this.valueA * 2; } @computed get doubledB() { return this.valueB * 2; }}7. 装饰器不工作问题描述使用装饰器时出现错误或不生效。解决方案确保配置正确// package.json{ "babel": { "plugins": [ ["@babel/plugin-proposal-decorators", { "legacy": true }], ["@babel/plugin-proposal-class-properties", { "loose": true }] ] }}或者使用 makeObservable// 不使用装饰器class Store { count = 0; constructor() { makeObservable(this, { count: observable }); }}8. TypeScript 类型错误问题描述使用 TypeScript 时出现类型错误。解决方案// 错误：没有类型参数class Store { count = 0; constructor() { makeObservable(this, { count: observable }); }}// 正确：使用类型参数class Store { count: number = 0; constructor() { makeObservable<Store>(this, { count: observable }); }}9. 数组操作问题问题描述数组操作不触发更新。解决方案// 错误：重新赋值整个数组@actionbadAddItem(item) { this.items = [...this.items, item];}// 正确：使用数组方法@actiongoodAddItem(item) { this.items.push(item);}// 或者使用 replace@actionreplaceItems(newItems) { this.items.replace(newItems);}10. 调试困难问题描述难以追踪状态变化和依赖关系。解决方案使用 traceimport { trace } from 'mobx';// 追踪 computedtrace(store.fullName);// 追踪组件渲染@observerclass MyComponent extends React.Component { render() { trace(true); // 追踪组件渲染 return <div>{store.count}</div>; }}使用 MobX DevToolsimport { configure } from 'mobx';configure({ // 启用调试模式 useProxies: 'ifavailable', isolateGlobalState: true});最佳实践总结始终在 action 中修改状态（MobX 6）使用 observer 包装需要响应状态变化的组件避免在 render 中创建新对象使用 computed 优化计算逻辑及时清理 reaction 和副作用正确处理异步操作避免循环依赖使用 trace 和 DevTools 调试合理拆分组件以减少依赖遵循 MobX 的最佳实践遵循这些最佳实践，可以避免大多数常见的 MobX 问题，构建稳定、高效的应用。

MobX 提供了多种工具来处理状态，包括 toJS、toJSON 和 observable.shallow。理解它们的区别和使用场景对于正确使用 MobX 至关重要。1. toJS基本用法toJS 将 observable 对象深度转换为普通 JavaScript 对象。import { observable, toJS } from 'mobx';const store = observable({ user: { name: 'John', age: 30, address: { city: 'New York', country: 'USA' } }, items: [1, 2, 3]});// 转换为普通对象const plainObject = toJS(store);console.log(plainObject);// {// user: {// name: 'John',// age: 30,// address: { city: 'New York', country: 'USA' }// },// items: [1, 2, 3]// }// plainObject 不再是 observableconsole.log(isObservable(plainObject)); // falseconsole.log(isObservable(plainObject.user)); // falseconsole.log(isObservable(plainObject.items)); // false使用场景将 observable 对象发送到 API将 observable 对象存储到 localStorage将 observable 对象传递给不兼容 observable 的库调试时查看状态示例：发送到 API@actionasync saveData() { const plainData = toJS(this.data); await api.saveData(plainData);}示例：存储到 localStorage@actionsaveToLocalStorage() { const plainState = toJS(this.state); localStorage.setItem('appState', JSON.stringify(plainState));}2. toJSON基本用法toJSON 将 observable 对象转换为 JSON 可序列化的对象。import { observable, toJSON } from 'mobx';const store = observable({ user: { name: 'John', age: 30, address: { city: 'New York', country: 'USA' } }, items: [1, 2, 3]});// 转换为 JSON 对象const jsonObject = toJSON(store);console.log(jsonObject);// {// user: {// name: 'John',// age: 30,// address: { city: 'New York', country: 'USA' }// },// items: [1, 2, 3]// }// 可以直接序列化为 JSONconst jsonString = JSON.stringify(store);console.log(jsonString);// {"user":{"name":"John","age":30,"address":{"city":"New York","country":"USA"}},"items":[1,2,3]}自定义 toJSONclass User { @observable name = 'John'; @observable password = 'secret'; @observable email = 'john@example.com'; toJSON() { return { name: this.name, email: this.email // 不包含 password }; }}const user = new User();const json = JSON.stringify(user);console.log(json);// {"name":"John","email":"john@example.com"}使用场景序列化 observable 对象为 JSON发送数据到服务器存储数据到数据库创建 API 响应3. observable.shallow基本用法observable.shallow 创建浅层可观察对象，只有顶层属性是可观察的。import { observable } from 'mobx';// 深度可观察（默认）const deepStore = observable({ user: { name: 'John', age: 30 }, items: [1, 2, 3]});// 浅层可观察const shallowStore = observable.shallow({ user: { name: 'John', age: 30 }, items: [1, 2, 3]});// deepStore 的嵌套对象也是可观察的deepStore.user.name = 'Jane'; // 会触发更新deepStore.items.push(4); // 会触发更新// shallowStore 的嵌套对象不是可观察的shallowStore.user.name = 'Jane'; // 不会触发更新shallowStore.items.push(4); // 不会触发更新// 但顶层属性的变化会触发更新shallowStore.user = { name: 'Jane', age: 30 }; // 会触发更新shallowStore.items = [1, 2, 3, 4]; // 会触发更新使用场景性能优化：减少需要追踪的依赖避免深度追踪带来的性能问题只需要追踪顶层变化处理大型数据结构示例：大型数组class Store { @observable.shallow items = []; constructor() { makeAutoObservable(this); } @action loadItems = async () => { const data = await fetch('/api/items').then(r => r.json()); this.items = data; // 只追踪整个数组的替换 };}4. observable.deep基本用法observable.deep 创建深度可观察对象，所有嵌套的属性都是可观察的（这是默认行为）。import { observable } from 'mobx';const deepStore = observable.deep({ user: { name: 'John', age: 30, address: { city: 'New York', country: 'USA' } }, items: [1, 2, 3]});// 所有嵌套属性都是可观察的deepStore.user.name = 'Jane'; // 会触发更新deepStore.user.address.city = 'Boston'; // 会触发更新deepStore.items.push(4); // 会触发更新5. 对比总结| 特性 | toJS | toJSON | observable.shallow ||------|------|--------|-------------------|| 用途 | 转换为普通 JS 对象 | 转换为 JSON 对象 | 创建浅层可观察对象 || 深度 | 深度转换 | 深度转换 | 仅顶层可观察 || 返回值 | 普通 JS 对象 | JSON 可序列化对象 | 可观察对象 || 可观察性 | 不可观察 | 不可观察 | 可观察 || 使用场景 | API 调用、存储 | 序列化、API 响应 | 性能优化 |6. 性能考虑使用 shallow 优化性能// 不好的做法：深度可观察大型数组class BadStore { @observable items = []; // 可能有数千个元素}// 好的做法：浅层可观察class GoodStore { @observable.shallow items = []; @action loadItems = async () => { const data = await fetch('/api/items').then(r => r.json()); this.items = data; // 只追踪数组替换 };}避免频繁调用 toJS// 不好的做法：频繁调用 toJS@observerclass BadComponent extends React.Component { render() { const plainData = toJS(store.data); // 每次渲染都调用 return <div>{plainData.length}</div>; }}// 好的做法：缓存结果或直接使用 observable@observerclass GoodComponent extends React.Component { render() { return <div>{store.data.length}</div>; // 直接使用 observable }}7. 常见陷阱陷阱 1：在 computed 中调用 toJS// 不好的做法@computed get badComputed() { const plainData = toJS(this.data); return plainData.filter(item => item.active);}// 好的做法@computed get goodComputed() { return this.data.filter(item => item.active);}陷阱 2：忘记 shallow 的限制const shallowStore = observable.shallow({ items: []});// 不会触发更新shallowStore.items.push(1);// 会触发更新shallowStore.items = [1];陷阱 3：混淆 toJS 和 toJSONconst store = observable({ user: { name: 'John' }});// toJS 返回普通对象const plain = toJS(store);console.log(plain instanceof Object); // true// toJSON 返回 JSON 可序列化对象const json = toJSON(store);console.log(JSON.stringify(json)); // {"user":{"name":"John"}}8. 最佳实践1. 根据需求选择可观察深度// 小型数据结构：使用深度可观察const smallStore = observable({ config: { theme: 'dark', language: 'en' }});// 大型数据结构：使用浅层可观察const largeStore = observable.shallow({ items: [] // 可能有数千个元素});2. 在需要时才使用 toJS// 只在发送到 API 时使用@actionasync sendData() { const plainData = toJS(this.data); await api.sendData(plainData);}// 在组件中直接使用 observable@observerconst Component = () => { return <div>{store.data.length}</div>;};3. 自定义 toJSON 控制序列化class User { @observable id = 1; @observable name = 'John'; @observable password = 'secret'; toJSON() { return { id: this.id, name: this.name // 不包含敏感信息 }; }}总结理解 toJS、toJSON 和 observable.shallow 的区别和使用场景：toJS：将 observable 转换为普通 JS 对象，用于 API 调用和存储toJSON：将 observable 转换为 JSON 对象，用于序列化observable.shallow：创建浅层可观察对象，用于性能优化正确使用这些工具，可以构建更高效、更可维护的 MobX 应用。

MobX 提供了多种工具来创建和管理可观察状态，包括 makeObservable、makeAutoObservable 和装饰器。理解它们的区别和使用场景对于正确使用 MobX 至关重要。1. makeObservable基本用法import { makeObservable, observable, computed, action } from 'mobx';class Store { count = 0; firstName = 'John'; lastName = 'Doe'; constructor() { makeObservable(this, { count: observable, firstName: observable, lastName: observable, fullName: computed, increment: action, decrement: action.bound }); } get fullName() { return `${this.firstName} ${this.lastName}`; } increment() { this.count++; } decrement = () => { this.count--; };}特点显式声明：需要显式声明每个属性的类型灵活性高：可以精确控制每个属性的行为类型安全：与 TypeScript 集成良好需要配置：需要在构造函数中调用适用场景需要精确控制每个属性的行为使用 TypeScript需要自定义配置高级用法class Store { data = []; loading = false; error = null; constructor() { makeObservable(this, { data: observable, loading: observable, error: observable, itemCount: computed, fetchData: action, clearData: action }, { autoBind: true }); // 自动绑定 this } get itemCount() { return this.data.length; } async fetchData() { this.loading = true; try { const response = await fetch('/api/data'); this.data = await response.json(); } catch (error) { this.error = error.message; } finally { this.loading = false; } } clearData() { this.data = []; this.error = null; }}2. makeAutoObservable基本用法import { makeAutoObservable } from 'mobx';class Store { count = 0; firstName = 'John'; lastName = 'Doe'; constructor() { makeAutoObservable(this); } get fullName() { return `${this.firstName} ${this.lastName}`; } increment() { this.count++; } decrement = () => { this.count--; };}特点自动推断：自动推断属性的类型简洁：代码更简洁，减少样板代码智能推断：getter → computed方法 → action字段 → observable可覆盖：可以覆盖默认推断适用场景快速开发不需要精确控制代码简洁性优先高级用法class Store { data = []; loading = false; error = null; _internalState = {}; // 以下划线开头的属性不会被自动推断 constructor() { makeAutoObservable(this, { // 覆盖默认推断 data: observable.deep, fetchData: flow, _internalState: false // 不使其可观察 }); } get itemCount() { return this.data.length; } fetchData = flow(function* () { this.loading = true; try { const response = yield fetch('/api/data'); this.data = yield response.json(); } catch (error) { this.error = error.message; } finally { this.loading = false; } });}3. 装饰器基本用法import { observable, computed, action } from 'mobx';class Store { @observable count = 0; @observable firstName = 'John'; @observable lastName = 'Doe'; @computed get fullName() { return `${this.firstName} ${this.lastName}`; } @action increment() { this.count++; } @action.bound decrement = () => { this.count--; };}特点声明式：使用装饰器语法简洁：代码更易读需要配置：需要 Babel 或 TypeScript 支持MobX 6 中可选：装饰器不再是必需的适用场景项目已配置装饰器支持喜欢装饰器语法需要与 MobX 4/5 兼容高级用法import { observable, computed, action, flow } from 'mobx';class Store { @observable data = []; @observable loading = false; @observable error = null; @computed get itemCount() { return this.data.length; } @action async fetchData() { this.loading = true; try { const response = await fetch('/api/data'); this.data = await response.json(); } catch (error) { this.error = error.message; } finally { this.loading = false; } } @action.bound clearData() { this.data = []; this.error = null; }}三者的对比| 特性 | makeObservable | makeAutoObservable | 装饰器 ||------|----------------|-------------------|--------|| 声明方式 | 显式配置 | 自动推断 | 装饰器 || 代码量 | 较多 | 少 | 少 || 灵活性 | 高 | 中 | 高 || TypeScript 支持 | 好 | 好 | 好 || 配置要求 | 需要 | 不需要 | 需要 Babel/TS || MobX 6 推荐 | 是 | 是 | 可选 |选择指南使用 makeObservable 当：需要精确控制每个属性的行为使用 TypeScript需要自定义配置需要覆盖默认行为class Store { data = []; constructor() { makeObservable(this, { data: observable.shallow, // 浅层可观察 itemCount: computed, fetchData: action }); }}使用 makeAutoObservable 当：快速开发不需要精确控制代码简洁性优先使用 MobX 6class Store { data = []; constructor() { makeAutoObservable(this); }}使用装饰器当：项目已配置装饰器支持喜欢装饰器语法需要与 MobX 4/5 兼容class Store { @observable data = [];}与 TypeScript 的集成makeObservable + TypeScriptimport { makeObservable, observable, computed, action } from 'mobx';class Store { count: number = 0; firstName: string = 'John'; lastName: string = 'Doe'; constructor() { makeObservable<Store>(this, { count: observable, firstName: observable, lastName: observable, fullName: computed, increment: action }); } get fullName(): string { return `${this.firstName} ${this.lastName}`; } increment(): void { this.count++; }}makeAutoObservable + TypeScriptimport { makeAutoObservable } from 'mobx';class Store { count: number = 0; firstName: string = 'John'; lastName: string = 'Doe'; constructor() { makeAutoObservable(this); } get fullName(): string { return `${this.firstName} ${this.lastName}`; } increment(): void { this.count++; }}装饰器 + TypeScriptimport { observable, computed, action } from 'mobx';class Store { @observable count: number = 0; @observable firstName: string = 'John'; @observable lastName: string = 'Doe'; @computed get fullName(): string { return `${this.firstName} ${this.lastName}`; } @action increment(): void { this.count++; }}最佳实践1. MobX 6 推荐使用 makeAutoObservable// 推荐class Store { count = 0; constructor() { makeAutoObservable(this); }}// 也可以使用 makeObservableclass Store { count = 0; constructor() { makeObservable(this, { count: observable }); }}2. 使用 makeObservable 覆盖默认行为class Store { data = []; constructor() { makeAutoObservable(this, { data: observable.shallow // 覆盖默认的深度可观察 }); }}3. 使用 action.bound 或 autoBindclass Store { count = 0; constructor() { makeAutoObservable(this, {}, { autoBind: true }); } increment() { this.count++; // this 自动绑定 }}4. 私有属性处理class Store { data = []; _privateData = []; // 以下划线开头，不会被自动推断 constructor() { makeAutoObservable(this, { _privateData: false // 明确不使其可观察 }); }}常见问题1. 装饰器不工作确保：配置了 Babel 或 TypeScript 装饰器支持使用了正确的装饰器语法MobX 版本支持装饰器2. makeAutoObservable 推断错误// 如果推断错误，使用 makeObservable 显式声明class Store { data = []; constructor() { makeAutoObservable(this, { data: observable.shallow // 显式声明 }); }}3. TypeScript 类型错误// 使用泛型参数class Store { count = 0; constructor() { makeObservable<Store>(this, { count: observable }); }}总结在 MobX 6 中，推荐使用 makeAutoObservable 进行快速开发，使用 makeObservable 进行精确控制。装饰器仍然可用，但不再是必需的。选择哪种方式取决于项目需求和个人偏好。

MobX 提供了三种主要的 reaction 类型：autorun、reaction 和 when。它们各有不同的使用场景和特点，理解它们的区别对于正确使用 MobX 至关重要。1. autorun基本用法import { autorun } from 'mobx';const store = observable({ count: 0});autorun(() => { console.log(`Count is: ${store.count}`);});store.count++; // 输出: Count is: 1store.count++; // 输出: Count is: 2特点立即执行：autorun 会在创建时立即执行一次自动追踪：自动追踪函数中访问的所有 observable自动重新执行：当依赖的 observable 变化时自动重新执行无返回值：不能返回值，主要用于副作用适用场景日志记录数据持久化同步状态到 localStorage发送分析数据示例：日志记录autorun(() => { console.log('State changed:', toJS(store));});示例：持久化到 localStorageautorun(() => { localStorage.setItem('appState', JSON.stringify(toJS(store)));});2. reaction基本用法import { reaction } from 'mobx';const store = observable({ count: 0, name: 'John'});reaction( () => store.count, // 追踪函数 (count, reaction) => { // 效果函数 console.log(`Count changed to: ${count}`); }, { fireImmediately: false } // 配置选项);store.count++; // 输出: Count changed to: 1store.name = 'Jane'; // 不会触发，因为只追踪 count特点延迟执行：默认情况下不会立即执行精确控制：可以精确指定要追踪的 observable比较变化：可以比较新旧值可配置：提供多种配置选项配置选项reaction( () => store.count, (count, prevCount, reaction) => { console.log(`Count changed from ${prevCount} to ${count}`); }, { fireImmediately: true, // 立即执行 delay: 100, // 延迟执行 equals: (a, b) => a === b, // 自定义比较函数 name: 'myReaction' // 调试名称 });适用场景需要精确控制追踪范围需要比较新旧值需要延迟执行复杂的副作用逻辑示例：搜索防抖reaction( () => store.searchQuery, (query) => { // 延迟 300ms 执行搜索 debounce(() => { performSearch(query); }, 300); }, { delay: 300 });示例：比较新旧值reaction( () => store.items, (items, prevItems) => { const added = items.filter(item => !prevItems.includes(item)); const removed = prevItems.filter(item => !items.includes(item)); console.log('Added:', added); console.log('Removed:', removed); }, { equals: comparer.structural } // 深度比较);3. when基本用法import { when } from 'mobx';const store = observable({ loaded: false, data: null});when( () => store.loaded, // 条件函数 () => { // 效果函数 console.log('Data loaded:', store.data); });store.loaded = true;store.data = { name: 'John' }; // 输出: Data loaded: { name: 'John' }特点一次性执行：条件满足后只执行一次自动清理：执行后自动清理可取消：可以手动取消返回 disposer：返回一个清理函数适用场景等待某个条件满足后执行操作初始化逻辑一次性副作用示例：等待数据加载when( () => store.isLoaded, () => { initializeApp(); });示例：可取消的 whenconst dispose = when( () => store.userLoggedIn, () => { showWelcomeMessage(); });// 如果需要取消dispose();示例：超时处理const dispose = when( () => store.dataLoaded, () => { console.log('Data loaded successfully'); });// 5秒后取消setTimeout(() => { dispose(); console.log('Loading timeout');}, 5000);三者的对比| 特性 | autorun | reaction | when ||------|---------|----------|------|| 执行时机 | 立即执行 | 延迟执行（默认） | 条件满足时执行 || 执行次数 | 多次 | 多次 | 一次 || 追踪范围 | 自动追踪所有依赖 | 精确指定追踪范围 | 只追踪条件 || 返回值 | 无 | disposer | disposer || 适用场景 | 日志、持久化 | 复杂副作用、比较新旧值 | 初始化、一次性操作 |选择指南使用 autorun 当：需要立即执行需要追踪所有依赖用于简单的副作用不需要比较新旧值autorun(() => { document.title = store.pageTitle;});使用 reaction 当：需要精确控制追踪范围需要比较新旧值需要延迟执行需要复杂的副作用逻辑reaction( () => store.userId, (userId, prevUserId) => { if (userId !== prevUserId) { loadUserData(userId); } });使用 when 当：需要等待某个条件只需要执行一次用于初始化逻辑需要可取消的操作when( () => store.initialized, () => { startApp(); });性能考虑1. 避免过度追踪// 不好的做法：autorun 追踪太多autorun(() => { console.log(store.user.name, store.user.email, store.user.age);});// 好的做法：reaction 精确追踪reaction( () => store.user.name, (name) => { console.log(name); });2. 及时清理// 在组件卸载时清理useEffect(() => { const dispose = autorun(() => { console.log(store.count); }); return () => { dispose(); // 清理 reaction };}, []);3. 使用 comparer 优化比较import { comparer } from 'mobx';reaction( () => store.items, (items) => { console.log('Items changed'); }, { equals: comparer.structural } // 深度比较，避免不必要的更新);常见陷阱1. 在 reaction 中产生副作用// 不好的做法：在追踪函数中产生副作用reaction( () => { console.log('Side effect!'); // 不应该在追踪函数中 return store.count; }, (count) => { console.log(count); });// 好的做法：追踪函数应该是纯函数reaction( () => store.count, (count) => { console.log('Side effect:', count); // 副作用在效果函数中 });2. 忘记清理 reaction// 不好的做法：忘记清理useEffect(() => { autorun(() => { console.log(store.count); }); // 没有清理函数}, []);// 好的做法：清理 reactionuseEffect(() => { const dispose = autorun(() => { console.log(store.count); }); return () => dispose();}, []);3. 滥用 autorun// 不好的做法：使用 autorun 处理一次性操作autorun(() => { if (store.initialized) { initializeApp(); // 会多次执行 }});// 好的做法：使用 when 处理一次性操作when( () => store.initialized, () => { initializeApp(); // 只执行一次 });总结理解 autorun、reaction 和 when 的区别和使用场景是掌握 MobX 的关键：autorun：用于简单的、需要立即执行的副作用reaction：用于需要精确控制、比较新旧值的复杂副作用when：用于等待条件满足后执行的一次性操作正确选择和使用这些 reaction 类型，可以构建更高效、更可维护的 MobX 应用。

MobX 和 Redux 是两种流行的状态管理库，它们在设计理念和使用方式上有显著差异：架构设计Redux：采用单向数据流架构遵循严格的不可变性原则使用纯函数（reducers）来处理状态更新状态是只读的，只能通过 dispatch action 来修改需要手动选择需要的状态（通过 useSelector）MobX：采用响应式编程架构允许可变状态，但通过 observable 进行追踪可以直接修改状态（在 action 中）自动追踪依赖关系，自动更新相关组件无需手动选择状态，组件自动订阅所需数据代码量和复杂度Redux：需要编写大量的样板代码（actions、action creators、reducers）需要配置 store、middleware、reducers代码结构相对复杂，学习曲线陡峭MobX：代码量少，简洁直观最小化配置，开箱即用学习曲线平缓，容易上手性能Redux：通过 shallowEqual 进行浅比较来决定是否重新渲染需要开发者手动优化性能（如使用 reselect）对于大型应用，可能需要额外的优化策略MobX：细粒度的依赖追踪，只更新真正需要更新的组件自动缓存计算属性，避免不必要的计算性能优化是自动的，开发者无需过多关注TypeScript 支持Redux：需要为 actions、reducers、state 等定义类型类型定义相对复杂，但类型安全性高需要使用类型断言或类型守卫MobX：类型推断更自然，类型定义更简单与 TypeScript 集成更流畅可以充分利用 TypeScript 的类型推断能力调试和可预测性Redux：状态变化完全可预测，易于调试Redux DevTools 提供强大的时间旅行调试功能所有的状态变化都通过 action 记录MobX：调试相对复杂，因为状态可以在多处修改MobX DevTools 提供了调试支持，但不如 Redux 强大需要遵循最佳实践（如使用 action）来提高可预测性适用场景选择 Redux：需要严格的状态管理规范团队规模大，需要明确的代码结构需要时间旅行调试状态变化逻辑复杂，需要中间件支持选择 MobX：追求开发效率和代码简洁性项目规模中小型需要快速原型开发团队对函数式响应式编程更熟悉总结Redux 更适合需要严格架构和可预测性的大型项目，而 MobX 更适合追求开发效率和简洁性的项目。选择哪种库应该根据项目需求、团队经验和长期维护考虑来决定。

MobX 是一个基于函数式响应式编程（FRP）的状态管理库，它通过透明地应用响应式编程范式，使状态管理变得简单和可扩展。MobX 的核心理念是"任何源自状态的内容都应该自动派生"，这意味着当状态发生变化时，所有依赖于该状态的派生值（如计算属性、反应等）会自动更新。MobX 的核心概念包括：Observable（可观察对象）：使用 observable、observable.object、observable.array 等方法创建可观察的状态。当这些状态发生变化时，MobX 会自动追踪并通知相关的观察者。Computed（计算属性）：使用 computed 创建派生值，这些值会根据其依赖的可观察状态自动计算和缓存。只有当依赖项发生变化时才会重新计算，具有高效的缓存机制。Actions（动作）：使用 action 或 action.bound 来修改状态。在 MobX 6 中，所有状态修改都必须在 action 中进行，这有助于追踪状态变化并确保可预测性。Reactions（反应）：包括 autorun、reaction 和 when，用于在状态变化时自动执行副作用。autorun 会立即执行并在依赖变化时重新运行；reaction 提供了更细粒度的控制，可以指定追踪函数和效果函数；when 会在条件满足时执行一次。Observer（观察者）：在 React 组件中使用 observer 高阶组件或 useObserver hook，使组件能够响应状态变化并自动重新渲染。MobX 的工作原理基于依赖追踪系统。当可观察对象被访问时，MobX 会建立依赖关系；当可观察对象被修改时，MobX 会通知所有依赖它的派生值和反应，触发相应的更新。这种机制使得 MobX 能够高效地管理状态，避免了手动触发更新的繁琐过程。与 Redux 等其他状态管理库相比，MobX 的优势在于：更少的样板代码更直观的状态管理方式自动化的依赖追踪更好的性能（通过细粒度的更新）更容易与 TypeScript 集成MobX 适用于各种规模的应用，特别是那些需要复杂状态管理和响应式更新的场景。

MobX 本身已经是一个高性能的状态管理库，但在实际应用中，仍然有一些优化技巧可以进一步提升性能。以下是 MobX 性能优化的最佳实践：1. 合理使用 computedcomputed 的缓存机制computed 属性会自动缓存结果，只在依赖项变化时重新计算：class Store { @observable firstName = 'John'; @observable lastName = 'Doe'; @observable age = 30; @computed get fullName() { console.log('Computing fullName'); return `${this.firstName} ${this.lastName}`; } @computed get info() { console.log('Computing info'); return `${this.fullName}, ${this.age} years old`; }}// 第一次访问会计算console.log(store.info); // Computing fullName, Computing info// 再次访问，使用缓存console.log(store.info); // 无输出// 修改 age，只重新计算 infostore.age = 31;console.log(store.info); // Computing info避免在 computed 中产生副作用// 错误：在 computed 中产生副作用@computed get badComputed() { console.log('Side effect!'); // 不应该在 computed 中 fetch('/api/data'); // 不应该在 computed 中 return this.data;}// 正确：computed 应该是纯函数@computed get goodComputed() { return this.data.filter(item => item.active);}2. 优化 observable 的使用只对需要追踪的状态使用 observable// 不好的做法：所有状态都是 observableclass Store { @observable config = { apiUrl: 'https://api.example.com', timeout: 5000, retries: 3 };}// 好的做法：只对会变化的状态使用 observableclass Store { config = { apiUrl: 'https://api.example.com', timeout: 5000, retries: 3 }; @observable data = []; @observable loading = false;}使用 shallow 或 deep 控制可观察深度import { observable, deep, shallow } from 'mobx';// 深度可观察（默认）const deepStore = observable({ user: { profile: { name: 'John' } }});// 浅层可观察const shallowStore = observable.shallow({ users: [ { name: 'John' }, { name: 'Jane' } ]});// 只有数组本身是可观察的，数组中的对象不是3. 批量更新状态使用 runInAction 批量更新// 不好的做法：多次触发更新@actionbadUpdate() { this.count++; this.name = 'New Name'; this.age++;}// 好的做法：批量更新@actiongoodUpdate() { runInAction(() => { this.count++; this.name = 'New Name'; this.age++; });}使用 transaction（MobX 4/5）import { transaction } from 'mobx';transaction(() => { store.count++; store.name = 'New Name'; store.age++;});4. 优化组件渲染使用 observer 只在需要的地方// 不好的做法：所有组件都用 observer@observerconst Header = () => <h1>My App</h1>;@observerconst Footer = () => <footer>© 2024</footer>;// 好的做法：只在需要响应状态变化的组件上使用 observerconst Header = () => <h1>My App</h1>;const Footer = () => <footer>© 2024</footer>;@observerconst Counter = () => <div>{store.count}</div>;拆分组件以减少依赖// 不好的做法：组件依赖太多状态@observerconst BadComponent = () => { return ( <div> <div>{store.user.name}</div> <div>{store.user.email}</div> <div>{store.settings.theme}</div> <div>{store.settings.language}</div> <div>{store.data.length}</div> </div> );};// 好的做法：拆分为多个组件@observerconst UserInfo = () => { return ( <div> <div>{store.user.name}</div> <div>{store.user.email}</div> </div> );};@observerconst Settings = () => { return ( <div> <div>{store.settings.theme}</div> <div>{store.settings.language}</div> </div> );};@observerconst DataCount = () => { return <div>{store.data.length}</div>;};使用 React.memo 配合 observerconst PureComponent = React.memo(observer(() => { return <div>{store.count}</div>;}));5. 避免在 render 中创建新对象// 不好的做法：每次渲染都创建新对象@observerconst BadComponent = () => { const style = { color: 'red' }; const handleClick = () => console.log('clicked'); return <div style={style} onClick={handleClick}>{store.count}</div>;};// 好的做法：在组件外部定义const style = { color: 'red' };const handleClick = () => console.log('clicked');@observerconst GoodComponent = () => { return <div style={style} onClick={handleClick}>{store.count}</div>;};6. 使用 trace 调试性能问题import { trace } from 'mobx';// 追踪 computed 的依赖trace(store.fullName);// 追踪 reaction 的依赖autorun(() => { console.log(store.count);}, { name: 'myReaction' });// 追踪组件的渲染@observerclass MyComponent extends React.Component { render() { trace(true); // 追踪组件渲染 return <div>{store.count}</div>; }}7. 使用 configure 优化配置import { configure } from 'mobx';configure({ // 强制所有状态修改都在 action 中 enforceActions: 'always', // 使用 Proxy（如果可用） useProxies: 'ifavailable', // computed 需要 reaction 才能计算 computedRequiresReaction: false, // 禁用不需要的警告 isolateGlobalState: true});8. 优化数组操作使用 splice 而不是重新赋值// 不好的做法：重新赋值整个数组@actionbadAddItem(item) { this.items = [...this.items, item];}// 好的做法：使用 splice@actiongoodAddItem(item) { this.items.push(item);}使用 replace 批量替换@actionreplaceItems(newItems) { this.items.replace(newItems);}9. 使用 reaction 替代 autorun// 不好的做法：autorun 会立即执行autorun(() => { console.log(store.count);});// 好的做法：reaction 提供更细粒度的控制reaction( () => store.count, (count) => { console.log(count); }, { fireImmediately: false });10. 使用 when 处理一次性条件// 不好的做法：使用 autorun 处理一次性条件autorun(() => { if (store.data.length > 0) { processData(store.data); }});// 好的做法：使用 whenwhen( () => store.data.length > 0, () => processData(store.data));11. 避免循环依赖// 不好的做法：循环依赖class StoreA { @observable value = 0; @computed get doubled() { return storeB.value * 2; }}class StoreB { @observable value = 0; @computed get doubled() { return storeA.value * 2; }}// 好的做法：避免循环依赖class Store { @observable valueA = 0; @observable valueB = 0; @computed get doubledA() { return this.valueA * 2; } @computed get doubledB() { return this.valueB * 2; }}12. 清理不需要的 reaction// 在组件卸载时清理 reactionuseEffect(() => { const dispose = autorun(() => { console.log(store.count); }); return () => { dispose(); // 清理 reaction };}, []);13. 使用 MobX DevTools 分析性能MobX DevTools 提供了强大的性能分析功能：查看依赖关系图监控状态变化分析渲染性能调试 computed 和 reaction14. 避免过度追踪// 不好的做法：在循环中访问 observable@observerconst BadComponent = () => { return ( <div> {store.items.map(item => ( <div key={item.id}> {item.name} - {item.value} </div> ))} </div> );};// 好的做法：使用 computed 预处理数据class Store { @observable items = []; @computed get itemDisplayData() { return this.items.map(item => ({ id: item.id, display: `${item.name} - ${item.value}` })); }}@observerconst GoodComponent = () => { return ( <div> {store.itemDisplayData.map(item => ( <div key={item.id}>{item.display}</div> ))} </div> );};15. 使用 makeAutoObservable 简化代码// MobX 6 推荐使用 makeAutoObservableclass Store { count = 0; firstName = 'John'; lastName = 'Doe'; constructor() { makeAutoObservable(this); } get fullName() { return `${this.firstName} ${this.lastName}`; } increment() { this.count++; }}总结MobX 性能优化的关键点：合理使用 computed 的缓存机制只对需要追踪的状态使用 observable批量更新状态减少触发次数优化组件渲染，减少不必要的重新渲染避免在 render 中创建新对象使用 trace 调试性能问题清理不需要的 reaction避免循环依赖和过度追踪遵循这些最佳实践，可以构建高性能的 MobX 应用。

MobX 的中间件和拦截器提供了强大的功能，可以在状态变化前后执行自定义逻辑。以下是 MobX 中间件和拦截器的详细使用方法：1. 拦截器（Intercept）基本用法拦截器允许在状态变化之前拦截和修改操作。import { observable, intercept } from 'mobx';const store = observable({ count: 0, items: []});// 拦截 count 的变化const dispose = intercept(store, 'count', (change) => { console.log('Before change:', change); // 可以修改变化 if (change.newValue < 0) { change.newValue = 0; // 不允许负数 } // 可以取消变化 if (change.newValue > 100) { return null; // 取消变化 } return change; // 允许变化});store.count = 5; // Before change: { type: 'update', object: store, name: 'count', newValue: 5 }console.log(store.count); // 5store.count = -1; // Before change: { type: 'update', object: store, name: 'count', newValue: -1 }console.log(store.count); // 0 (被拦截器修改)store.count = 101; // Before change: { type: 'update', object: store, name: 'count', newValue: 101 }console.log(store.count); // 0 (被拦截器取消)dispose(); // 清理拦截器拦截数组操作const items = observable([1, 2, 3]);intercept(items, (change) => { console.log('Array change:', change); // 拦截 push 操作 if (change.type === 'add') { if (typeof change.newValue !== 'number') { throw new Error('Only numbers allowed'); } } return change;});items.push(4); // Array change: { type: 'add', object: items, name: '3', newValue: 4 }items.push('invalid'); // Error: Only numbers allowed拦截 Map 操作const map = observable(new Map());intercept(map, (change) => { console.log('Map change:', change); // 拦截 set 操作 if (change.type === 'update' || change.type === 'add') { if (change.name === 'secret') { throw new Error('Cannot set secret key'); } } return change;});map.set('key1', 'value1'); // Map change: { type: 'add', object: map, name: 'key1', newValue: 'value1' }map.set('secret', 'value'); // Error: Cannot set secret key2. 观察器（Observe）基本用法观察器允许在状态变化后执行自定义逻辑。import { observable, observe } from 'mobx';const store = observable({ count: 0, items: []});// 观察 count 的变化const dispose = observe(store, 'count', (change) => { console.log('After change:', change); console.log('Old value:', change.oldValue); console.log('New value:', change.newValue);});store.count = 5;// After change: { type: 'update', object: store, name: 'count', oldValue: 0, newValue: 5 }dispose(); // 清理观察器观察数组变化const items = observable([1, 2, 3]);observe(items, (change) => { console.log('Array changed:', change); if (change.type === 'splice') { console.log('Added:', change.added); console.log('Removed:', change.removed); console.log('Index:', change.index); }});items.push(4);// Array changed: { type: 'splice', object: items, added: [4], removed: [], index: 3 }items.splice(1, 1);// Array changed: { type: 'splice', object: items, added: [], removed: [2], index: 1 }观察对象的所有变化const store = observable({ count: 0, name: 'John', items: []});// 观察所有属性的变化const dispose = observe(store, (change) => { console.log(`${change.name} changed from ${change.oldValue} to ${change.newValue}`);});store.count = 1; // count changed from 0 to 1store.name = 'Jane'; // name changed from John to Janedispose();3. 中间件（Middleware）创建自定义中间件import { observable, action, runInAction } from 'mobx';function loggingMiddleware(store, methodName, actionFn) { return function(...args) { console.log(`[Action] ${methodName} called with:`, args); const startTime = performance.now(); const result = actionFn.apply(this, args); const endTime = performance.now(); console.log(`[Action] ${methodName} completed in ${endTime - startTime}ms`); return result; };}class Store { @observable count = 0; constructor() { makeAutoObservable(this); } @action increment = () => { this.count++; }; @action decrement = () => { this.count--; };}// 应用中间件const store = new Store();const originalIncrement = store.increment.bind(store);store.increment = loggingMiddleware(store, 'increment', originalIncrement);使用 action 钩子import { action, configure } from 'mobx';configure({ // 启用 action 钩子 enforceActions: 'always'});// 全局 action 钩子const originalAction = action.bound;action.bound = function(target, propertyKey, descriptor) { console.log(`[Action] ${propertyKey} is being defined`); return originalAction(target, propertyKey, descriptor);};错误处理中间件function errorHandlingMiddleware(store, methodName, actionFn) { return async function(...args) { try { return await actionFn.apply(this, args); } catch (error) { console.error(`[Error] ${methodName} failed:`, error); // 可以将错误存储到 store 中 if (store.errorStore) { store.errorStore.addError(error); } throw error; } };}class Store { @observable data = null; @observable error = null; constructor() { makeAutoObservable(this); } @action fetchData = async () => { this.data = await fetch('/api/data').then(r => r.json()); };}// 应用错误处理中间件const store = new Store();store.fetchData = errorHandlingMiddleware(store, 'fetchData', store.fetchData);4. 使用拦截器和观察器实现撤销/重做class HistoryStore { @observable past = []; @observable future = []; constructor(targetStore) { this.targetStore = targetStore; makeAutoObservable(this); this.setupInterceptors(); } setupInterceptors() { // 拦截所有状态变化 Object.keys(this.targetStore).forEach(key => { if (this.targetStore[key] && typeof this.targetStore[key] === 'object') { intercept(this.targetStore, key, (change) => { // 保存当前状态到 past this.past.push({ key, oldValue: change.oldValue, timestamp: Date.now() }); // 清空 future this.future = []; return change; }); } }); } @action undo = () => { if (this.past.length === 0) return; const lastChange = this.past.pop(); this.future.push(lastChange); // 恢复旧值 this.targetStore[lastChange.key] = lastChange.oldValue; }; @action redo = () => { if (this.future.length === 0) return; const nextChange = this.future.pop(); this.past.push(nextChange); // 恢复新值 this.targetStore[nextChange.key] = nextChange.newValue; }; @computed get canUndo() { return this.past.length > 0; } @computed get canRedo() { return this.future.length > 0; }}5. 性能监控中间件function performanceMonitoringMiddleware(store, methodName, actionFn) { return function(...args) { const startTime = performance.now(); const result = actionFn.apply(this, args); const endTime = performance.now(); const duration = endTime - startTime; // 记录性能数据 if (!store.performanceMetrics) { store.performanceMetrics = {}; } if (!store.performanceMetrics[methodName]) { store.performanceMetrics[methodName] = { count: 0, totalTime: 0, maxTime: 0, minTime: Infinity }; } const metrics = store.performanceMetrics[methodName]; metrics.count++; metrics.totalTime += duration; metrics.maxTime = Math.max(metrics.maxTime, duration); metrics.minTime = Math.min(metrics.minTime, duration); // 警告慢操作 if (duration > 100) { console.warn(`[Performance] ${methodName} took ${duration.toFixed(2)}ms`); } return result; };}6. 权限控制中间件function permissionMiddleware(store, methodName, actionFn, permissions) { return function(...args) { const user = store.userStore?.user; if (!user) { throw new Error('User not authenticated'); } if (permissions && !user.permissions.includes(permissions)) { throw new Error(`User does not have permission: ${permissions}`); } return actionFn.apply(this, args); };}class Store { @observable data = []; constructor() { makeAutoObservable(this); } @action addItem = (item) => { this.data.push(item); }; @action deleteItem = (id) => { this.data = this.data.filter(item => item.id !== id); };}// 应用权限中间件const store = new Store();store.addItem = permissionMiddleware(store, 'addItem', store.addItem, 'write');store.deleteItem = permissionMiddleware(store, 'deleteItem', store.deleteItem, 'delete');7. 日志记录中间件function loggingMiddleware(store, methodName, actionFn) { return function(...args) { const logEntry = { timestamp: new Date().toISOString(), action: methodName, args: JSON.parse(JSON.stringify(args)), result: null, error: null }; try { const result = actionFn.apply(this, args); logEntry.result = JSON.parse(JSON.stringify(result)); return result; } catch (error) { logEntry.error = { message: error.message, stack: error.stack }; throw error; } finally { // 将日志发送到服务器或存储到本地 if (store.logStore) { store.logStore.addLog(logEntry); } } };}8. 防抖和节流中间件function debounceMiddleware(store, methodName, actionFn, delay = 300) { let timeoutId = null; return function(...args) { if (timeoutId) { clearTimeout(timeoutId); } timeoutId = setTimeout(() => { actionFn.apply(this, args); timeoutId = null; }, delay); };}function throttleMiddleware(store, methodName, actionFn, delay = 300) { let lastCallTime = 0; return function(...args) { const now = Date.now(); const timeSinceLastCall = now - lastCallTime; if (timeSinceLastCall >= delay) { actionFn.apply(this, args); lastCallTime = now; } };}class SearchStore { @observable query = ''; @observable results = []; constructor() { makeAutoObservable(this); } @action performSearch = async (query) => { this.results = await api.search(query); };}// 应用防抖中间件const searchStore = new SearchStore();searchStore.performSearch = debounceMiddleware( searchStore, 'performSearch', searchStore.performSearch, 300);总结MobX 的中间件和拦截器提供了强大的功能：拦截器：在状态变化前拦截和修改操作观察器：在状态变化后执行自定义逻辑中间件：包装 action 以添加额外功能常见应用：撤销/重做、性能监控、权限控制、日志记录、防抖节流正确使用这些功能，可以构建更强大、更灵活的 MobX 应用。

MobX 的依赖追踪系统是其核心机制，它通过细粒度的追踪实现了高效的响应式更新。以下是 MobX 依赖追踪的详细工作原理：依赖追踪的基本原理MobX 使用观察者模式和依赖图来实现依赖追踪。当 observable 被访问时，MobX 会建立依赖关系；当 observable 被修改时，MobX 会通知所有依赖它的观察者。核心组件1. Reaction（反应）Reaction 是依赖追踪的执行单元，包括：autorun：立即执行，并在依赖变化时自动重新执行reaction：提供更细粒度的控制，可以指定追踪函数和效果函数observer（React 组件）：包装 React 组件，使其能够响应状态变化computed：计算属性，也是一种特殊的 reaction2. Derivation（派生）Derivation 表示依赖于 observable 的计算或副作用。每个 derivation 维护一个依赖列表。3. Atom（原子）Atom 是最小的可观察单元，每个 observable 对象、数组、Map 等都由多个 atom 组成。依赖追踪的执行流程1. 追踪阶段（Tracing）当 reaction 执行时：autorun(() => { console.log(store.count); // 访问 observable});执行步骤：MobX 将当前 reaction 标记为"正在追踪"当访问 store.count 时，MobX 记录下这个 reaction 依赖于 count 这个 atom继续执行，记录所有访问的 observable执行完成后，reaction 进入"稳定"状态2. 通知阶段（Notification）当 observable 被修改时：runInAction(() => { store.count++; // 修改 observable});执行步骤：MobX 检测到 count atom 被修改查找所有依赖于 count 的 reaction将这些 reaction 标记为"过时"（stale）在下一个事件循环中，重新执行这些 reaction依赖图的结构MobX 维护一个双向的依赖图：Atom → Derivation：每个 atom 知道哪些 derivation 依赖于它Derivation → Atom：每个 derivation 知道自己依赖于哪些 atom这种双向关系使得 MobX 能够高效地进行依赖更新和清理。细粒度更新MobX 的依赖追踪是细粒度的，这意味着：只更新真正需要更新的部分避免不必要的重新计算和重新渲染自动处理嵌套的依赖关系示例：class Store { @observable firstName = 'John'; @observable lastName = 'Doe'; @observable age = 30; @computed get fullName() { return `${this.firstName} ${this.lastName}`; }}const observerComponent = observer(() => { // 只依赖 fullName，不依赖 age return <div>{store.fullName}</div>;});当 age 变化时，组件不会重新渲染；只有当 firstName 或 lastName 变化时才会重新渲染。批量更新MobX 会自动批量更新，避免多次触发 reaction：runInAction(() => { store.firstName = 'Jane'; store.lastName = 'Smith'; store.age = 25;});即使修改了多个 observable，相关的 reaction 只会执行一次。依赖清理当 reaction 不再需要时，MobX 会自动清理依赖关系：组件卸载时，observer 会自动清理使用 dispose() 方法手动清理 reaction避免内存泄漏性能优化MobX 的依赖追踪系统提供了多种性能优化：懒计算：computed 只在需要时才计算缓存机制：computed 的结果会被缓存批量更新：多个状态变化合并为一次更新细粒度追踪：只追踪真正需要的依赖调试依赖追踪MobX 提供了调试工具来查看依赖关系：import { trace } from 'mobx';// 追踪 computed 的依赖trace(store.fullName);// 追踪 reaction 的依赖autorun(() => { console.log(store.count);}, { name: 'myReaction' });常见问题1. 循环依赖MobX 能够检测和避免循环依赖，但设计时应尽量避免。2. 过度追踪避免在循环或条件中访问 observable，这可能导致不必要的依赖。3. 内存泄漏确保在组件卸载时清理 reaction，避免内存泄漏。总结MobX 的依赖追踪系统通过观察者模式和依赖图实现了高效的响应式更新。理解这个系统的工作原理有助于编写更高效的 MobX 代码，并避免常见的性能问题。

MobX 的测试策略和工具对于构建可靠的应用至关重要。以下是 MobX 测试的完整指南：1. 测试 Store基本测试import { UserStore } from './UserStore';describe('UserStore', () => { let store; beforeEach(() => { store = new UserStore(); }); it('should initialize with default values', () => { expect(store.user).toBeNull(); expect(store.isAuthenticated).toBe(false); }); it('should login user', async () => { await store.login({ username: 'test', password: 'test' }); expect(store.user).not.toBeNull(); expect(store.isAuthenticated).toBe(true); }); it('should logout user', () => { store.user = { id: 1, name: 'Test' }; store.isAuthenticated = true; store.logout(); expect(store.user).toBeNull(); expect(store.isAuthenticated).toBe(false); });});测试 computed 属性describe('ProductStore', () => { let store; beforeEach(() => { store = new ProductStore(); }); it('should compute featured products', () => { store.products = [ { id: 1, name: 'Product 1', featured: true }, { id: 2, name: 'Product 2', featured: false }, { id: 3, name: 'Product 3', featured: true } ]; expect(store.featuredProducts).toHaveLength(2); expect(store.featuredProducts[0].name).toBe('Product 1'); expect(store.featuredProducts[1].name).toBe('Product 3'); }); it('should update when products change', () => { store.products = [{ id: 1, name: 'Product 1', featured: true }]; expect(store.featuredProducts).toHaveLength(1); store.products.push({ id: 2, name: 'Product 2', featured: true }); expect(store.featuredProducts).toHaveLength(2); });});测试异步 actiondescribe('AsyncStore', () => { let store; let mockApi; beforeEach(() => { mockApi = { fetchData: jest.fn().mockResolvedValue({ data: 'test' }) }; store = new AsyncStore(mockApi); }); it('should fetch data successfully', async () => { await store.fetchData(); expect(store.data).toEqual({ data: 'test' }); expect(store.loading).toBe(false); expect(mockApi.fetchData).toHaveBeenCalled(); }); it('should handle errors', async () => { mockApi.fetchData.mockRejectedValue(new Error('Network error')); await expect(store.fetchData()).rejects.toThrow('Network error'); expect(store.error).toBe('Network error'); expect(store.loading).toBe(false); });});2. 测试 React 组件测试 observer 组件import { render, screen, fireEvent } from '@testing-library/react';import { observer } from 'mobx-react-lite';import { UserStore } from './UserStore';const TestComponent = observer(({ store }) => ( <div> {store.isAuthenticated ? ( <div>Welcome, {store.user?.name}</div> ) : ( <div>Please login</div> )} <button onClick={store.login}>Login</button> </div>));describe('TestComponent', () => { it('should show login message when not authenticated', () => { const store = new UserStore(); render(<TestComponent store={store} />); expect(screen.getByText('Please login')).toBeInTheDocument(); }); it('should show welcome message when authenticated', () => { const store = new UserStore(); store.user = { id: 1, name: 'Test' }; store.isAuthenticated = true; render(<TestComponent store={store} />); expect(screen.getByText('Welcome, Test')).toBeInTheDocument(); }); it('should update when state changes', () => { const store = new UserStore(); render(<TestComponent store={store} />); expect(screen.getByText('Please login')).toBeInTheDocument(); store.user = { id: 1, name: 'Test' }; store.isAuthenticated = true; expect(screen.getByText('Welcome, Test')).toBeInTheDocument(); });});测试表单组件describe('FormComponent', () => { it('should update form data', () => { const store = new FormStore(); render(<FormComponent store={store} />); const input = screen.getByLabelText('Name'); fireEvent.change(input, { target: { value: 'John' } }); expect(store.formData.name).toBe('John'); }); it('should submit form', async () => { const store = new FormStore(); store.submit = jest.fn(); render(<FormComponent store={store} />); const button = screen.getByText('Submit'); fireEvent.click(button); expect(store.submit).toHaveBeenCalled(); });});3. 使用 MobX 测试工具使用 spyimport { spy } from 'mobx';describe('Spy Usage', () => { it('should spy on observable changes', () => { const store = observable({ count: 0 }); const countSpy = jest.fn(); spy(store, 'count', (change) => { countSpy(change); }); store.count = 1; store.count = 2; expect(countSpy).toHaveBeenCalledTimes(2); });});使用 traceimport { trace } from 'mobx';describe('Trace Usage', () => { it('should trace computed dependencies', () => { const store = observable({ firstName: 'John', lastName: 'Doe' }); const fullName = computed(() => `${store.firstName} ${store.lastName}`); // 追踪依赖 trace(fullName); expect(fullName.get()).toBe('John Doe'); });});使用 isObservableimport { isObservable } from 'mobx';describe('IsObservable Usage', () => { it('should check if object is observable', () => { const observableObj = observable({ count: 0 }); const plainObj = { count: 0 }; expect(isObservable(observableObj)).toBe(true); expect(isObservable(plainObj)).toBe(false); });});4. Mock API 调用使用 Jest mockimport { UserStore } from './UserStore';describe('UserStore with API', () => { let store; let mockApi; beforeEach(() => { mockApi = { login: jest.fn(), logout: jest.fn(), fetchUser: jest.fn() }; store = new UserStore(mockApi); }); it('should call API on login', async () => { mockApi.login.mockResolvedValue({ id: 1, name: 'Test' }); await store.login({ username: 'test', password: 'test' }); expect(mockApi.login).toHaveBeenCalledWith({ username: 'test', password: 'test' }); }); it('should handle API errors', async () => { mockApi.login.mockRejectedValue(new Error('Invalid credentials')); await expect(store.login({ username: 'test', password: 'test' })) .rejects.toThrow('Invalid credentials'); expect(store.error).toBe('Invalid credentials'); });});使用 MSW (Mock Service Worker)import { setupServer, rest } from 'msw';import { UserStore } from './UserStore';const server = setupServer( rest.post('/api/login', (req, res, ctx) => { return res( ctx.status(200), ctx.json({ id: 1, name: 'Test' }) ); }));describe('UserStore with MSW', () => { let store; beforeAll(() => server.listen()); afterEach(() => server.resetHandlers()); afterAll(() => server.close()); beforeEach(() => { store = new UserStore(); }); it('should login successfully', async () => { await store.login({ username: 'test', password: 'test' }); expect(store.user).toEqual({ id: 1, name: 'Test' }); expect(store.isAuthenticated).toBe(true); });});5. 测试 reactiondescribe('Reaction Testing', () => { it('should trigger reaction when observable changes', () => { const store = observable({ count: 0 }); const reactionSpy = jest.fn(); reaction( () => store.count, (count) => { reactionSpy(count); } ); store.count = 1; expect(reactionSpy).toHaveBeenCalledWith(1); store.count = 2; expect(reactionSpy).toHaveBeenCalledWith(2); }); it('should not trigger when value is same', () => { const store = observable({ count: 0 }); const reactionSpy = jest.fn(); reaction( () => store.count, (count) => { reactionSpy(count); } ); store.count = 0; expect(reactionSpy).not.toHaveBeenCalled(); });});6. 测试中间件describe('Middleware Testing', () => { it('should call middleware before action', () => { const middlewareSpy = jest.fn(); const actionSpy = jest.fn(); const store = { @observable count: 0, @action increment() { this.count++; } }; const originalIncrement = store.increment; store.increment = function(...args) { middlewareSpy(...args); return originalIncrement.apply(this, args); }; store.increment(); expect(middlewareSpy).toHaveBeenCalled(); expect(actionSpy).toHaveBeenCalled(); });});7. 集成测试describe('Integration Tests', () => { it('should handle complete user flow', async () => { const store = new RootStore(); // 登录 await store.userStore.login({ username: 'test', password: 'test' }); expect(store.userStore.isAuthenticated).toBe(true); // 加载数据 await store.dataStore.loadData(); expect(store.dataStore.data).not.toBeNull(); // 添加到购物车 store.cartStore.addItem(store.dataStore.data[0]); expect(store.cartStore.items).toHaveLength(1); // 结账 await store.cartStore.checkout(); expect(store.cartStore.items).toHaveLength(0); });});8. 测试最佳实践1. 隔离测试// 每个测试都应该独立beforeEach(() => { store = new Store();});// 清理副作用afterEach(() => { if (store.dispose) { store.dispose(); }});2. 使用快照测试it('should match snapshot', () => { const store = new Store(); store.data = { id: 1, name: 'Test' }; expect(toJS(store.data)).toMatchSnapshot();});3. 测试边界情况it('should handle empty array', () => { const store = new Store(); store.items = []; expect(store.itemCount).toBe(0);});it('should handle null values', () => { const store = new Store(); store.user = null; expect(store.userName).toBe('Guest');});4. 测试错误处理it('should handle network errors gracefully', async () => { const store = new Store(); mockApi.fetchData.mockRejectedValue(new Error('Network error')); await expect(store.fetchData()).rejects.toThrow('Network error'); expect(store.error).toBe('Network error'); expect(store.loading).toBe(false);});总结MobX 测试的关键点：测试 Store：验证 observable、computed 和 action 的行为测试组件：验证 observer 组件的响应性使用测试工具：spy、trace、isObservableMock API：使用 Jest mock 或 MSW测试 reaction：验证副作用是否正确触发测试中间件：验证中间件是否正确执行集成测试：验证多个 store 之间的交互最佳实践：隔离测试、快照测试、边界情况、错误处理遵循这些测试策略，可以构建可靠、可维护的 MobX 应用。