react18 mobx 使用示例

index.tsx

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

// 将组件包装为观察者组件
const App: React.FC = observer(() => {
  // 使用store中的数据
  const count = counterStore.count;

  // 在useEffect中使用store方法
  useEffect(() => {
    // 组件挂载时执行
    return () => {
      // 组件卸载时执行
    };
  }, []);

  return (
    <div>
      <h2>父组件</h2>
      <div>
        <p>当前计数：{count}</p>
        <button onClick={counterStore.increment}>增加</button>
        <button onClick={counterStore.decrement}>减少</button>
        <button onClick={counterStore.asyncIncrement}>异步增加</button>
      </div>
    </div>
  );
});

export default App;

store

import { makeAutoObservable } from 'mobx';

// 创建store类
class CounterStore {
  // 定义可观测的状态
  count = 0;

  // 构造函数
  constructor() {
    // 自动将所有属性转换为可观察的
    makeAutoObservable(this);
  }

  // 定义修改状态的方法
  increment = () => {
    this.count++;
  };

  decrement = () => {
    this.count--;
  };

  asyncIncrement = () => {
    setTimeout(() => {
      this.count++;
    }, 1000);
  };
}

// 创建store实例
const counterStore = new CounterStore();

export default counterStore;