148.《mobx-react-lite + TypeScript 入门实战教程（完整版）》

一、教程前言MobX 是一款轻量级响应式状态管理库相比 Redux 更简洁、学习成本更低mobx-react-lite是 MobX 专为 React 函数组件设计的轻量级绑定库结合 TypeScript 可实现类型安全的状态管理。本教程通过「计数器 汽车列表」实战案例从零讲解mobx-react-lite核心用法包含可观察状态定义、动作/计算属性、全局状态共享、组件响应式渲染、异步状态处理等。示例仓库地址https://github.com/MyMessages/mobox-demo.git效果图二、环境准备与项目初始化1. 克隆示例项目# 克隆仓库到本地gitclone https://github.com/MyMessages/mobox-demo.git# 进入项目目录cdmobox-demo2. 安装依赖# 使用 npm 安装npminstall# 或使用 yarnyarninstall3. 核心依赖说明package.json从截图可见项目核心依赖如下{dependencies:{mobx:^6.15.0,// MobX 核心库mobx-react-lite:^4.1.1,// React 函数组件绑定库react:^19.2.4,// React 核心react-dom:^19.2.4,// React DOM 渲染typescript:^4.9.5// TypeScript}}4. 启动项目# 启动开发服务器npmstart# 或 yarnyarnstart启动后访问http://localhost:3000即可查看效果。三、项目结构mobox-demo/ └── src/ ├── store/ │ ├── counter.ts # 计数器 Store包含同步/异步操作、计算属性、副作用 │ └── car.ts # 汽车列表 Store可观察数组 ├── store.ts # 根 Store React Context 封装 ├── App.tsx # 主页面组件observer 响应式组件 └── index.tsx # 应用入口四、核心代码实现1. 计数器 Storesrc/store/counter.tsimport{makeAutoObservable,autorun,reaction,runInAction}frommobxclassCounter{constructor(){// 自动将类属性转为 observable方法转为 actiongetter 转为 computedmakeAutoObservable(this,{},{autoBind:true})}// 可观察状态当前计数count0// 动作同步 1increment(){this.count}// 动作同步 -1decrement(){this.count--}// 动作异步 1延迟 1 秒incrementAsync(){setTimeout((){// 异步回调中修改状态必须用 runInAction 包裹确保 MobX 追踪变更runInAction((){this.count})},1000)}// 动作重置计数reset(){this.count0}// 计算属性count 的 2 倍只读缓存结果依赖变化时才重新计算getdouble(){returnthis.count*2}}// 创建全局单例 Counter 实例constcounternewCounter()// 副作用autorun —— 每次 count 变化自动执行autorun((){console.log([autorun] 当前 count:,counter.count)})// 副作用reaction —— 精确监听 count 变化可获取新值和旧值reaction(()counter.count,(newCount,oldCount){console.log([reaction] count 变化:${oldCount}→${newCount})})exportdefaultcounter关键知识点makeAutoObservableMobX 6 推荐写法自动完成状态/动作/计算属性的标记autoBind: true自动绑定this指向避免组件调用时丢失上下文runInAction异步场景下修改状态的必备方法确保变更被 MobX 捕获autorun/reactionMobX 副作用 API用于监听状态变化并执行日志/上报等逻辑2. 汽车列表 Storesrc/store/car.tsimport{makeAutoObservable}frommobxclassCar{constructor(){makeAutoObservable(this,{},{autoBind:true})}// 可观察数组汽车品牌列表list[Tesla,BMW,Audi]// 可选新增修改数组的动作示例addCar(car:string){this.list.push(car)}removeCar(index:number){this.list.splice(index,1)}}// 导出单例实例exportdefaultnewCar()关键知识点数组/对象等引用类型会被 MobX 自动转为可观察结构组件中使用car.list.join(, )会自动监听数组变化数组变更时组件自动重渲染3. 根 Store Context 封装src/store.tsimport{createContext,useContext}fromreactimportcarfrom./carimportcounterfrom./counter// 根 Store 类组合所有子 Store实现统一管理classMobxStore{carcar countercounter}// 创建全局单例根 StoreconststorenewMobxStore()// 创建 React Context用于全局注入 StoreconststoreContextcreateContext(store)// 自定义 Hook简化组件中获取 Store 的方式替代逐层传递 propsexportconstuseStore()useContext(storeContext)关键知识点使用 React Context 实现全局状态共享任何组件都可通过useStore()获取根 Store单例模式确保整个应用共享同一个状态实例4. 主页面组件src/App.tsximport React from react import { observer } from mobx-react-lite // 导入 observer 高阶组件 import { useStore } from ./store // 使用 observer 包装组件使其响应 MobX 状态变化 const App observer(() { // 从根 Store 中获取 counter 和 car 子 Store const { counter, car } useStore() return ( div classNameApp header classNameApp-header {/* 展示原始计数值 */} pCount -- old: {counter.count}/p {/* 展示计算属性计数值的 2 倍 */} pCount -- X2: {counter.double}/p {/* 展示可观察数组 */} pCar List: {car.list.join(, )}/p {/* 同步 1 按钮 */} button onClick{counter.increment} style{{ margin: 0 5px }} Click 1 /button {/* 异步 1 按钮延迟 1 秒 */} button onClick{counter.incrementAsync} style{{ margin: 0 5px }} Click 1 (async) /button {/* 同步 -1 按钮 */} button onClick{counter.decrement} style{{ margin: 0 5px }} Click -1 /button {/* 重置按钮 */} button onClick{counter.reset} style{{ margin: 0 5px }} Click reset /button {/* 可选测试数组操作按钮 */} button onClick{() car.addCar(BYD)} style{{ margin: 0 5px }} Add BYD /button /header /div ) }) export default App关键知识点observer将 React 函数组件转为响应式组件依赖的 MobX 状态变化时自动重渲染组件中直接访问counter.count、counter.double、car.list无需额外监听逻辑按钮点击直接调用 Store 中的action方法遵循 MobX「状态只能通过动作修改」的规范五、运行效果与交互说明启动项目后访问http://localhost:3000可体验以下交互基础计数操作点击Click 1计数立即 1点击Click -1计数立即 -1点击Click reset计数重置为 0点击Click 1 (async)1 秒后计数 1异步场景演示计算属性Count -- X2会自动跟随count变化始终显示count * 2可观察数组点击Add BYD按钮汽车列表会新增BYD页面自动更新控制台日志状态变化时控制台会打印autorun和reaction的日志直观展示状态变更监听效果六、核心概念总结概念作用代码示例observable定义可观察状态count 0/list [Tesla, ...]action定义修改状态的方法increment()/addCar()computed定义基于状态的衍生值缓存结果get double()observer让组件响应状态变化自动重渲染observer(() { ... })autorun监听状态变化自动执行副作用autorun(() console.log(counter.count))reaction精确监听某个状态可获取新/旧值reaction(() counter.count, (new, old) { ... })runInAction异步场景下修改状态确保被 MobX 追踪runInAction(() this.count)useStore自定义 Hook全局获取根 Storeconst { counter } useStore()七、进阶优化与扩展1. 性能优化局部响应式渲染如果组件大部分内容不依赖 MobX 状态可使用Observer组件包裹局部内容减少重渲染范围import { Observer } from mobx-react-lite const OptimizedApp () { const { counter } useStore() return ( div h2固定标题不会重渲染/h2 {/* 仅这部分响应式更新 */} Observer {() pCount: {counter.count}/p} /Observer /div ) }2. 多 Store 拆分复杂项目可按业务模块拆分更多子 Store如userStore、orderStore在根 Store 中组合// src/store/user.tsclassUserStore{...}exportdefaultnewUserStore()// src/store.tsclassMobxStore{carcar countercounter useruserStore// 新增用户 Store}3. 类型安全增强TypeScript 会自动推断 Store 类型也可显式定义接口interfaceICounter{count:numberdouble:numberincrement:()voiddecrement:()voidincrementAsync:()voidreset:()void}八、部署与构建1. 构建生产版本npmrun build# 或 yarnyarnbuild构建产物会生成在build/目录可直接部署到静态服务器。2. 代码提交与推送# 查看修改gitstatus# 添加修改gitadd.# 提交gitcommit-mfeat: complete mobx-react-lite demo# 推送到远程仓库gitpush origin main九、常见问题与避坑指南组件不响应状态变化确认组件是否被observer包裹确认状态修改是否在action或runInAction中执行异步状态不更新异步回调中修改状态必须用runInAction包裹this 指向丢失定义 Store 时添加{ autoBind: true }或在组件中手动绑定onClick{() counter.increment()}数组/对象不更新确保数组/对象是 MobX 可观察结构避免直接赋值新数组/对象推荐使用push/splice等方法