react @connect的作用简单理解(dva @connect)
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |
一、前言
最近在自学react
发现项目中用到了@connect
这个方法但是不知道是什么意思
网上百度发现有这样解释的
connect的作用是将组件和models结合在一起。将models中的state绑定到组件的props中。并提供一些额外的功能譬如dispatch
还有这样解释的
connect用来链接组件和状态管理器。你可以通过dispath调用对应仓库中的方法也可以通过在this.props下找到仓库的数据进行操作。
还有这样的
connect 方法返回的也是一个 React 组件通常称为容器组件。因为它是原始 UI 组件的容器即在外面包了一层 State。
connect 方法传入的第一个参数是 mapStateToProps 函数mapStateToProps 函数会返回一个对象用于建立 State 到 Props 的映射关系。
这种东西初学者看了也不明白是什么意思感觉不够通俗易懂。反正本人是没看懂
后来终于自己琢磨明白了在此总结下。
二、@connect的作用个人理解
1.首先是react
项目里用到了@connect
注解点击这个注解进入源码发现路径是node_modules\dva\index.d.ts
因此也可以说是dva中的@connect
。
2.本人的项目中是这样使用的
@connect(({ loading, OnlineTrainSet, codeselect }) => ({
OnlineTrainSet,
codeselect,
loading: loading.models.OnlineTrainSet,
}))
(1)@connect的意思是将models中的状态(state)装到组件的props里。
(2)具体到这里就是会把OnlineTrainSetcodeselectloading装入this.props里面后续使用this.props.OnlineTrainSet
this.props.codeselect
this.props.loading
就可以使用了。
(3)OnlineTrainSet是本人的项目中有一个文件项目名\src\pages\MyOnlineTrainSet\models\OnlineTrainSet.js
内容有
export default {
namespace: 'OnlineTrainSet',
state: {
currView: 'home',
currData: {},
......
注意这个文件里namespace: 'OnlineTrainSet'
上方@connect
里用OnlineTrainSet
就可以装入了
state
就是装入this.props里的内容
这个文件的位置在models
文件夹里所以能用@connect
装入
使用了@connect
后后续页面就可以使用this.props.OnlineTrainSet.currView
、获取到的值就是home
。
(4)codeselect这个也类似只不过是位于本人的项目中的项目名\src\models\codeselect.js
(也是自己写的js注意位置是另一个models文件夹总之也可以)其中也用到了namespace: 'codeselect'
与state
所以也可以用@connect
装入。
(5)loading这个搜索namespace: 'loading'
没有找到应该是框架里实现的也类似
这里是把loading.models.OnlineTrainSet
装入了this.props
里面
获取时使用this.props.loading
取到的值就是loading.models.OnlineTrainSet
的值
loading.models
里有各个文件的加载情况如果正在加载中、就是true如果不是、就是false
所以当this.props.loading
为true时就说明OnlineTrainSet.js
文件正在加载中当this.props.loading
为false时就说明OnlineTrainSet.js
文件加载完了如果为null就说明没有值、没有加载这个文件
3.后续代码中是这样使用的
const { OnlineTrainSet } = this.props;
//和这个一样
//const OnlineTrainSet = this.props.OnlineTrainSet;
console.log(OnlineTrainSet.treeData);
这个的意思是声明一个const类型的OnlineTrainSet对象值为this.props.OnlineTrainSet (ES6语法)
因为之前用@connect
放入this.props
里面了所以这里就可以取出来使用。
三、总结
1.reactdva里的@connect
connect方法可以把models
文件夹里的js文件里的state
参数装入this.props
里面根据namespace
装入
2.后续使用时可以从this.props
里拿出来用
3.可以把自己写的js文件的state
参数装入也可以把框架实现的state
参数装入供后续使用。例如上方的loading
四、备注
1.关于额外的功能譬如dispatch是这样
(1)上方自己写的OnlineTrainSet.js
文件中在state参数旁边还有这样的一段
effects: {
*fetchTreeNodes({ queryPara, callback }, { call, put }) {
const response = yield call(services.post, '/api/xxx/treenodes', queryPara);
if (response) {
yield put({
type: 'updateTreeData',
treeData: response,
queryPara,
});
if (callback) callback(response);
}
},
这段是请求后端接口/api/xxx/treenodes
获取到返回值后使用put({})
方法把返回值放入了自己的state里key是treeData
value是response
还有key是queryParavalue是queryPara也放到自己的state里了。
由于之前用@connect
放入了this.props
里所以后续用this.props.OnlineTrainSet.treeData
就可以获取到值。
这里的type: 'updateTreeData'
是对数据进行了处理下面还有个处理方法
reducers: {
updateTreeData(state, action) {
return {
...state,
treeData: action.treeData || state.treeData,
editVisiable: false,
};
},
......
(2)注意获取值之前在使用@connect
的页面里还用到了这样一段
this.props.dispatch({
type: 'OnlineTrainSet/fetchTreeNodes',
queryPara: {},
callback: resp => {
......
},
});
这里type: 'OnlineTrainSet/fetchTreeNodes'
的意思就是指OnlineTrainSet.js
文件里的fetchTreeNodes
方法
callback
里可以写方法执行完毕后执行的方法回调方法
需要先执行完这个dispatch
方法后使用this.props.OnlineTrainSet.treeData
才有值。
(3)这样就是说使用@connect
后就可以用dispatch
方法了。