react基于mobx和ant封装数据状态管理工具

1.数据状态管理工具原理解析

数据状态管理工具的原理是通过mobx创建一个“可观察”的数据，然后使用mobx中名为 observer 的方法包裹组件，将我们封装的组件变成观察者，成为观察者组件。

成为观察者组件，当组件内使用的“可观察数据”发生改变时，会触发render，更新视图。从而实现数据驱动视图的功能。

2.数据状态管理工具封装基础思想

在封装数据状态管理工具的时候，我们可以将其封装成一个类或者一个函数，我采用的是将其封装成一个函数，传参是ds的配置数据，然后返回一个可观察的数据状态管理工具数据实例。

// props中传ds的配置数据
const DataSet = (props)=>{
  return observable({...});
}
​
//使用时先定义一个ds的配置数据,类似
const ds = {
    data:[...],
    fields:[...],
    queryFields:[...],
    transport: {...},
}
​
//组件内使用时
 constructor(props) {
        super(props);
        this.ListDs = DataSet(ds);
}
    
//封装ant-design表格，使其适配自己封装的DS。

3.简易数据状态管理工具基础属性

DataSet Porps

参数	说明
data	源数据
autoQuery	是否自动查询
autoCreate	初始化时自动创建一条记录
selection	表格选择模式