connect:react @connect的作用简单理解(dva @connect) 2024-04-26 10:04:39 0 0 一、前言 最近在自学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)具体到这里,就是会把OnlineTrainSet,codeselect,loading装入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.react(dva)里的@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是queryPara,value是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方法了。 收藏(0)