【React】MobX 6 + React FC + TS 的使用 最佳实践（持续更新，2024/01/20）

此篇为 mobx 6 + react + ts 最新应用实践

此篇为 mobx 6 + react + ts 最新应用实践

此篇为 mobx 6 + react + ts 最新应用实践

MobX官网的示范代码风格class组件和函数式组件混用，翻看github仓库中mobxjs/mobx-react-lite的readme.md文件后发现，有些废弃的api也在官网示例上，感觉官网的示例比较难以理解。

安装👇

// 安装两个官方包
pnpm i mobx mobx-react-lite

创建👇

// store
// 可以创建多个store，使用时引入对应store即可
import { makeAutoObservable } from 'mobx'

type State = {
  name: string;
  // ...code
}
type Actions = {
  changeName: (value:State["name"]) => void
  // ...code
}
// 状态
const data = makeAutoObservable<DataProps>({
  name: 'default name'
});
// actions 用于复杂操作情况。
// 非必需，直接修改对象值也可以响应，xxStore.data.name = 'new val';
const actions: Actions = {
  changeName: (val) => data.name = val;
}
// 在此处导出 store，就可以用 xxStore.data.name 了。
export const xxStore ={ data, actions };

使用👇

// any component
import { observer } from 'mobx-react-lite'
import store from '@/store'

const Welcome = () => <p> hello { store.data.name } </p>;

// 只需要用 observer 包裹一下你的组件
export defalut observer(Welcome);// observer 返回一个响应式组件

修改👇

// any component
import store from '@/store'

const ChangeInput = () => {
  const onChange = (el) => store.actions.changeName(el.target.value);
  return <input onChange={onChange} />;
};

export defalut ChangeInput

相比Redux的 /store /action /reducer connect action dispatch redux-thunk(异步中间件) 一系列痛苦操作(当然Redux现在也有hook了)，减少了中间写connect action dispatch等操作。

mobx 6 通过 makeAutoObservable 创建数据源，observer 订阅数据。

mobx 可以通过创建多个 store，避免单 store 臃肿。

代码更简洁，可读性更好。