react dva 的 connect 与 @connect

佚名 2024-06-26 06:21:25 举报

篇首语：本文由小编为大家整理，主要介绍了react dva 的 connect 与 @connect相关的知识，希望对你有一定的参考价值。

参考技术A https://dvajs.com/guide/introduce-class.html#connect-方法

connect的作用是将组件和models结合在一起。将models中的state绑定到组件的props中。并提供一些额外的功能，譬如dispatch

connect 的使用

【connect 方法返回的也是一个 React 组件，通常称为容器组件。因为它是原始 UI 组件的容器，即在外面包了一层 State。

connect 方法传入的第一个参数是 mapStateToProps 函数，该函数需要返回一个对象，用于建立 State 到 Props 的映射关系。】

简而言之，connect接收一个函数，返回一个函数。

第一个函数会注入全部的models，你需要返回一个新的对象，挑选该组件所需要的models。

export default connect(( user, login, global = , loading ) => (
currentUser: user.currentUser,
collapsed: global.collapsed,
fetchingNotices: loading.effects["global/fetchNotices"],
notices: global.notices
))(BasicLayout);

// 简化版
export default connect(
( user, login, global = , loading ) => return
currentUser: user.currentUser,
collapsed: global.collapsed,
fetchingNotices: loading.effects["global/fetchNotices"],
notices: global.notices

)(BasicLayout);

//////////////////////////////////////
@connect的使用

其实只是connect的装饰器、语法糖罢了。

// 将 model 和 component 串联起来

export default connect(( user, login, global = , loading ) => (
currentUser: user.currentUser,
collapsed: global.collapsed,
fetchingNotices: loading.effects["global/fetchNotices"],
notices: global.notices,
menuData: login.menuData, // by hzy
redirectData: login.redirectData, // by hzy
))(BasicLayout);

// 改为这样（export 的不再是connect，而是class组件本身。），也是可以执行的，但要注意@connect必须放在export default class前面：
// 将 model 和 component 串联起来

@connect(( user, login, global = , loading ) => (
currentUser: user.currentUser,
collapsed: global.collapsed,
fetchingNotices: loading.effects["global/fetchNotices"],
notices: global.notices,
menuData: login.menuData,
redirectData: login.redirectData,
))

export default class BasicLayout extends React.PureComponent // ...

dva与create-react-app的结合使用

　　dva与我们的create-react-app创建的两款脚手架是我们写react项目的两款优秀框架，之前一种使用create-react-app这款脚手架进行开发。然后这个框架美中不足的是redux方面着实令人书写麻烦然而dva框架就对其进行了封装改良使其看起来vuex相似度十分高下面给大家介绍下用这两个框架结合起来开发的步骤吧

　　首先利用create-react-app生成一个脚手架然后下载一个dva和history包

接着把脚手架生成的src全部删掉用我们自己的项目目录进行开发

　　首先建立一个index.js文件夹作为我们项目的主入口

 1 import dva from "dva"; 2 import App from "./App" 3  4 //注意这种引入方式已经报销  在控制台会报警告 5 // import createHistory from "history/createBrowserHistory"; 6  7 //这种为history路由展示方式 8 //const createHistory=require("history").createBrowserHistory 9 10 //这种为hash路由展示方式11 const createHistory=require("history").createHashHistory12 13 //下面是两种注入方式14 const app = dva(15   history: createHistory(),16 );17 18 //const app=dva(createHistory);19 20 app.router(App)21 22 app.start("#root");

View Code

然后建立一个App.jsx作为我们项目路由的主出口文件

 1 import React,Suspense from "react" 2  3 import Router from "dva/router" 4  5 import RouteView from "./routes/RouteView" 6 import RouteConfig from "./routes/RouteConfig" 7  8 //注意这里一定要注入history不然页面展示不出来  而且是结构出来的history 9 function App(history)10     return 11         loading...
>12         13         14         15     16 17 18 export default App

View Code

为什么使用这个App.jsx呢？

　　---原因当然是想使用路由表了为了让其与vue项目相似度更高些哈哈下面展示下个人封装的两个路由表

RouteView

 1 import React,  Component  from "react" 2  3 import Switch,Redirect,Route from "dva/router" 4  5 export default class RouteView extends Component  6     render()  7         return ( 8              9                 this.props.children.map((item,index)=>10                     if(item.redirect)11                         return 12                     else13                         return 14                                 return 15                         >16                     17                 )18             19         )20     21

View Code

RouteConfig

 1 /* 2  * @Author: chenqiang  3  * @Date: 2019-08-16 10:59:42  4  * @Last Modified by: chenqiang 5  * @Last Modified time: 2019-08-17 20:19:41 6  * 路由配置表 7  */ 8 import React from "react"; 9 const RouteConfig=[10     11         path:"/main",12         component:React.lazy(()=>import("@/views/main/index.jsx")),13         children:[14            15                path:"/main/home",16                component:React.lazy(()=>import("@/views/main/home/index.jsx"))17            ,18                path:"/main",19                redirect: "/main/home"20            21         ]22     , 23         path:"/login",24         component:React.lazy(()=>import("@/views/login/index.jsx"))25     ,26         path:"/register",27        component:React.lazy(()=>import("@/views/register/index.jsx"))28     ,29         path:"/",30         redirect:"/main"31     32 ]33 34 export default RouteConfig;

View Code

然后此时我们就可以放心大胆的yarn start运行我们的项目了

很令人无语的是控制台爆出了这么一个警告虽然不影响我们的代码执行，但是有强迫症的人来说看见这篇警告总是非常不爽的一件事

于是就各种查阅资料进行取消这个警告

　　先说下这个警告的意思吧说第一种引入的方式已被废除让我们用下面哪种引入方式进行引入然后是不是很神奇呢，我明明没有这样

引入过为什么给我报出来了呢？？？答案在下面===>

打开我们的node_modulex 找到我们dva包打开下面这个文件

然后在里面就会有哪种方式的引入将其更改掉就好了

美中不足的是每次重新下包就会给你自动改回去~~~

剩下的就可以放心大胆的撸代码了然后下面在贴一个antd的按需加载

建造一个.babelrc文件内容如下

 1  2     "presets": [ 3         "react-app" 4     ], 5     "plugins": [ 6         [ 7             "import", 8              9                 "libraryName": "antd",10                 "libraryDirectory": "es",11                 "style": "css" // `style: true` 会加载 less 文件12             13         ]14     ]15

View Code

注意package.json 不能再有babelrc这个字段了不然会报错

以上是关于react dva 的 connect 与 @connect的主要内容，如果未能解决你的问题，请参考以下文章