Mobx-React-Lite 使用教程

1. 项目介绍

mobx-react-lite 是 mobx-react 的轻量化版本，专门为 React 函数式组件设计。它通过 React Hooks 提供了简洁的状态管理解决方案，使得在函数式组件中使用 MobX 变得更加高效和便捷。mobx-react-lite 的核心优势在于其轻量级（仅 1.5kB gzipped）和性能优化，适合在不需要类组件支持的项目中使用。

2. 项目快速启动

安装

首先，确保你已经安装了 mobx 和 mobx-react-lite：

npm install mobx mobx-react-lite

创建 Store

创建一个简单的 MobX Store：

import { makeObservable, observable, action, computed } from "mobx";

class Store {
  @observable count = 0;

  constructor() {
    makeObservable(this);
  }

  @computed get double() {
    return this.count * 2;
  }

  @action increment() {
    this.count++;
  }

  @action decrement() {
    this.count--;
  }
}

const store = new Store();
export default store;

使用 Store

在 React 组件中使用 mobx-react-lite 的 observer 和 useLocalObservable：

import React from "react";
import { observer, useLocalObservable } from "mobx-react-lite";
import store from "./store";

const Counter = observer(() => {
  const localStore = useLocalObservable(() => store);

  return (
    <div>
      <p>Count: {localStore.count}</p>
      <p>Double: {localStore.double}</p>
      <button onClick={() => localStore.increment()}>Increment</button>
      <button onClick={() => localStore.decrement()}>Decrement</button>
    </div>
  );
});

export default Counter;

3. 应用案例和最佳实践

应用案例

mobx-react-lite 适用于需要轻量级状态管理的 React 项目，尤其是在函数式组件中。例如，在一个简单的计数器应用中，mobx-react-lite 可以帮助你轻松管理状态，并在状态变化时自动更新视图。

最佳实践

1. 使用 observer 包装组件：确保所有需要响应状态变化的组件都被 observer 包装。
2. 使用 useLocalObservable：在函数式组件中使用 useLocalObservable 来创建和管理本地状态。
3. 避免过度嵌套：尽量保持状态管理的简洁性，避免过度嵌套的状态结构。

4. 典型生态项目

mobx-react-lite 是 MobX 生态系统的一部分，与其相关的典型项目包括：

• MobX：核心状态管理库，提供 observable、action、computed 等基本功能。
• MobX-React：支持类组件和函数式组件的状态管理库，功能更为全面。
• React：mobx-react-lite 依赖于 React 16.8 及以上版本，特别是 React Hooks。

通过这些项目的协同使用，可以构建出高效、可维护的 React 应用。