react @connect的作用简单理解(dva @connect)(react connect用法)

推荐整理分享react @connect的作用简单理解(dva @connect)(react connect用法)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:react connect方法,react connect原理,react usecontent,react connect原理,react-rewired,react中connect的作用,react connect用法,react connect原理,内容如对您有帮助，希望把文章链接给更多的朋友！

最近在自学react，发现项目中用到了@connect这个方法，但是不知道是什么意思；

网上百度，发现有这样解释的：

还有这样解释的：

还有这样的：

这种东西初学者看了也不明白是什么意思，感觉不够通俗易懂。（反正本人是没看懂）

后来，终于自己琢磨明白了，在此总结下。

1.首先，是react项目里用到了@connect注解，点击这个注解进入源码，发现路径是node_modules\dva\index.d.ts，因此也可以说是dva中的@connect。

2.本人的项目中，是这样使用的：

(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 ，内容有：

注意，这个文件里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.后续代码中，是这样使用的：

这个的意思是，