MobX进阶:从基础到高级特性全面探索

MobX 提供了丰富的高级特性,包括计算属性、反应式视图、中间件、异步流程控制、依赖注入和动态 observable 、在服务端渲染和 TypeScript 支持方面提供了良好的集成。这些特性进一步增强了 MobX 在状态管理方面的灵活性和可扩展性,使其成为一个功能强大、易于使用的状态管理解决方案。

下面分别通过示例代码进行说明。

1. 计算属性(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 数组发生变化时,这两个计算属性会自动更新。

2. 反应式视图(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 中可观察状态的变化。

3. 中间件(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 的功能。

4. 异步操作与 runInAction:

import { observable, action, runInAction } from 'mobx';

class TodoStore {
  @observable todos = [];
  @observable loading = false;
  @observable error = null;

  @action
  async 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 中,确保状态的一致性。

5. 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 也能确保状态更新的原子性,避免了部分状态更新的问题。

6. 依赖注入

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 实例。这样可以确保每个组件实例都有自己独立的状态管理。

7. 动态 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 支持方面的示例代码。

8. 服务端渲染

在服务端渲染中使用 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>
  );
};

9. 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;

  @action
  addTodo(text: string) {
    this.todos.push({
      id: this.todos.length + 1,
      text,
      completed: false
    });
  }

  @action
  toggleTodo(id: number) {
    const todo = this.todos.find(t => t.id === id);
    if (todo) {
      todo.completed = !todo.completed;
    }
  }

  @computed
  get completedTodos() {
    return this.todos.filter(todo => todo.completed);
  }

  @computed
  get incompleteTodos() {
    return this.todos.filter(todo => !todo.completed);
  }
}

export default TodoStore;

在这个例子中,我们定义了 Todo 接口来描述待办事项的数据结构。在 TodoStore 中,我们使用 TypeScript 的类型注解来声明可观察状态、actions 和计算属性。
这样做可以在开发过程中获得更好的类型检查和智能提示,提高代码质量和可维护性。当与 React 组件集成时,TypeScript 也可以为组件的 props 和状态提供更好的类型检查支持。