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

本是古典何须时尚 2024-03-27 11:16 61阅读 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`方法了。