React学习系列(八)：状态管理工具mobx

状态管理工具类似于vue 的vuex react的状态管理工有：mobx，redux,zustand

1.mobx的基本概念

Mobx 的基本概念包括以下几个方面：

• 介绍：Mobx 是简单、可扩展的状态管理工具，通过运用透明的函数式响应编程使状态管理变得简单和可拓展。

• Redux 和 Mobx 的区别：复杂的应用需要合理理清业务逻辑关系并合理使用。

2.基本使用

2.1核心概念

1.observable定义一个存储state的可追踪字段（proxy） 2.action将一个方法标记为可以修改state的action 3.computed标记一个可以由state派生出新值并且缓存其输出的计算属性。

2.2 示例

使用步骤： 1.创建store文件

import { makeAutoObservable, runInAction } from 'mobx'

class DataListStore {
    dataList: any[] = []

    constructor() {
        makeAutoObservable(this)
    }

    async getList(data: any) {
        const res : any = await getDataListApi(data)
        runInAction(()=>{
            this.dataList = res
        })
    }
}

export default  new DataListStore()

通过 runInAction 可以保证所有异步更新可观察对象步骤都标识为 action

2.在组件中使用

// App.tsx
import DataListStore from './store/DataListStore';
// observer 是一个高阶组件函数，需要包裹一个组件，这样组件才会更新
import { observer } from 'Mobx-react'

function App() {
  const {DataListStore} = useStore() // useStore的声明需要补充
  
  console.log(DataListStore.dataList) // 接口数据更新响应
  
  return (
    <div className="App">
        222222
    </div>
  );
}
export default observer(App); // 与store配合使用