一、前言
最近在自学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方法了。
版权声明：本文为CSDN博主「追逐梦想永不停」的原创文章，原文链接：https://blog.csdn.net/BHSZZY/article/details/128836389