MobX 提供了丰富的高级特性,包括计算属性、反应式视图、中间件、异步流程控制、依赖注入和动态 observable 、在服务端渲染和 TypeScript 支持方面提供了良好的集成。这些特性进一步增强了 MobX 在状态管理方面的灵活性和可扩展性,使其成为一个功能强大、易于使用的状态管理解决方案。
下面分别通过示例代码进行说明。
- 计算属性(computed properties):
import { observable, computed } from 'mobx';class TodoStore {@observable todos = [];@computed get completedTodos() {return this.todos.filter(todo => todo.completed);}@computed get incompleteTodos() {return this.todos.filter(todo => !todo.completed);}
}const todoStore = new TodoStore();
todoStore.todos.push({ text: 'Learn MobX', completed: true });
todoStore.todos.push({ text: 'Build an app', completed: false });console.log(todoStore.completedTodos.length); // 1
console.log(todoStore.incompleteTodos.length); // 1
在这个例子中,我们定义了两个计算属性 completedTodos 和 incompleteTodos。当 todos 数组发生变化时,这两个计算属性会自动更新。
- 反应式视图(reactive views):
import { observable } from 'mobx';
import { observer } from 'mobx-react-lite';const counterStore = observable({count: 0,increment() {this.count++;},decrement() {this.count--;}
});const Counter = observer(() => {return (<div><p>Count: {counterStore.count}</p><button onClick={counterStore.increment}>Increment</button><button onClick={counterStore.decrement}>Decrement</button></div>);
});
在这个例子中,我们使用 observer 高阶组件包裹了 Counter 组件。这使得组件能够自动响应 counterStore 中可观察状态的变化。
- 中间件(middleware):
import { observable, configure } from 'mobx';// 定义一个日志中间件
const logger = store => {let prevState = store.getState();return next => {return action => {console.log('prev state', prevState);const nextState = next(action);console.log('next state', store.getState());prevState = store.getState();return nextState;};};
};// 应用中间件
configure({enforceActions: 'observed',middleware: [logger]
});const counterStore = observable({count: 0,increment() {this.count++;},decrement() {this.count--;}
});counterStore.increment();
// 控制台输出:
// prev state { count: 0 }
// next state { count: 1 }
在这个例子中,我们定义了一个简单的日志中间件,在 action 执行前后打印状态信息。通过将中间件应用到 MobX 的配置中,我们可以扩展 MobX 的功能。
- 异步操作与
runInAction:
import { observable, action, runInAction } from 'mobx';class TodoStore {@observable todos = [];@observable loading = false;@observable error = null;@actionasync fetchTodos() {this.loading = true;try {const response = await fetch('/api/todos');const data = await response.json();runInAction(() => {this.todos = data;this.loading = false;this.error = null;});} catch (err) {runInAction(() => {this.error = err.message;this.loading = false;});}}
}const todoStore = new TodoStore();
todoStore.fetchTodos();
在这个例子中,我们使用 runInAction 来确保异步操作中状态更新的原子性。无论是更新 todos 还是 loading 和 error 状态,都会包裹在 runInAction 中,确保状态的一致性。
- Flows
MobX 提供了一个名为 flow 的生成器函数,可以帮助我们更好地管理异步操作。flow 可以让我们编写同步风格的异步代码,同时仍能享受 MobX 的自动依赖追踪和状态更新机制。
import { observable, flow } from 'mobx';class TodoStore {@observable todos = [];@observable loading = false;@observable error = null;fetchTodos = flow(function* () {this.loading = true;try {const response = yield fetch('/api/todos');const data = yield response.json();this.todos = data;} catch (err) {this.error = err.message;} finally {this.loading = false;}});
}const todoStore = new TodoStore();
todoStore.fetchTodos();
使用 flow 可以让异步操作的代码更加简洁和易读。同时,flow 也能确保状态更新的原子性,避免了部分状态更新的问题。
- 依赖注入
MobX 支持依赖注入,这使得在大型应用中管理 Store 变得更加灵活和可扩展。我们可以使用 inject 高阶组件或 useLocalStore 钩子注入 Store 实例到组件中。
import { useLocalStore } from 'mobx-react-lite';const TodoList = () => {const todoStore = useLocalStore(() => new TodoStore());return (<div>{todoStore.todos.map(todo => (<div key={todo.id}>{todo.text}</div>))}</div>);
};
在这个例子中,我们使用 useLocalStore 钩子创建了一个局部的 TodoStore 实例。这样可以确保每个组件实例都有自己独立的状态管理。
- 动态 observable
有时我们需要在运行时创建可观察的数据结构。MobX 提供了 observable.map、observable.set 和 observable.array 等 API 来动态创建可观察的集合。
import { observable } from 'mobx';class TodoStore {@observable todos = observable.map();addTodo(id, text) {this.todos.set(id, { id, text, completed: false });}toggleTodo(id) {const todo = this.todos.get(id);todo.completed = !todo.completed;}
}const todoStore = new TodoStore();
todoStore.addTodo(1, 'Learn MobX');
todoStore.addTodo(2, 'Build an app');
todoStore.toggleTodo(1);
在这个例子中,我们使用 observable.map 创建了一个可观察的 Map 来存储 todos。这样我们可以在运行时动态添加和修改 todos,同时 MobX 也能自动追踪这些变化,确保相关组件能够正确更新。
好的,我来给出 MobX 在服务端渲染和 TypeScript 支持方面的示例代码。
- 服务端渲染
在服务端渲染中使用 MobX 需要一些额外的配置,主要包括:
- 在服务端创建 MobX 的 Store 实例
- 在渲染页面之前,先让 Store 完成数据加载
- 在客户端重新挂载时,将服务端渲染的状态传递给客户端 Store
以下是一个简单的示例:
// server.js
import React from 'react';
import { renderToString } from 'react-dom/server';
import { Provider } from 'mobx-react';
import TodoStore from './TodoStore';const app = (req, res) => {const todoStore = new TodoStore();await todoStore.fetchTodos();const html = renderToString(<Provider todoStore={todoStore}><TodoApp /></Provider>);res.send(`<!DOCTYPE html><html><head><title>MobX SSR Example</title></head><body><div id="root">${html}</div><script>window.__INITIAL_STATE__ = ${JSON.stringify(todoStore.snapshot)};</script><script src="/bundle.js"></script></body></html>`);
};
在客户端, TodoApp 组件可以通过 useLocalStore 钩子来获取预加载的 Store 实例:
// client.js
import React from 'react';
import { useLocalStore } from 'mobx-react-lite';
import TodoStore from './TodoStore';const TodoApp = () => {const todoStore = useLocalStore(() => new TodoStore(window.__INITIAL_STATE__));return (<div>{todoStore.todos.map(todo => (<div key={todo.id}>{todo.text}</div>))}</div>);
};
- TypeScript 支持
MobX 与 TypeScript 有着良好的集成,可以充分利用 TypeScript 的类型检查和智能提示功能。下面是一个使用 TypeScript 的 MobX 示例:
// TodoStore.ts
import { observable, action, computed } from 'mobx';interface Todo {id: number;text: string;completed: boolean;
}class TodoStore {@observable todos: Todo[] = [];@observable loading: boolean = false;@observable error: string | null = null;@actionaddTodo(text: string) {this.todos.push({id: this.todos.length + 1,text,completed: false});}@actiontoggleTodo(id: number) {const todo = this.todos.find(t => t.id === id);if (todo) {todo.completed = !todo.completed;}}@computedget completedTodos() {return this.todos.filter(todo => todo.completed);}@computedget incompleteTodos() {return this.todos.filter(todo => !todo.completed);}
}export default TodoStore;
在这个例子中,我们定义了 Todo 接口来描述待办事项的数据结构。在 TodoStore 中,我们使用 TypeScript 的类型注解来声明可观察状态、actions 和计算属性。
这样做可以在开发过程中获得更好的类型检查和智能提示,提高代码质量和可维护性。当与 React 组件集成时,TypeScript 也可以为组件的 props 和状态提供更好的类型检查支持。
