react的用法和短语（react @connect的作用简单理解(dva @connect)）
一 、前言
最近在自学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方法了 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！