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, // by hzy
redirectData: login.redirectData, // by hzy
})) export default class BasicLayout extends React.PureComponent {
// ...
}

react dva 的 connect 与 @connect的更多相关文章

  1. JavaScript(基于react+dva)

    变量声明 const 和 let:分别表示常量和变量 模板字符串 const user = 'world'; console.log(`hello ${user}`); // hello world ...

  2. react+dva 全局model中异步获取数据state在组件中取不到值

    先上结论,不是取不到,是写法有问题. 全文分4部分,1是问题描述,2是一开始的解决想法(错误做法),3是问题产生原因的思考,4是正常解决方法.只想看结论直接跳4 1.问题描述 接触react dva一 ...

  3. React & Dva & Actions & dispatch & effects

    React & Dva & Actions & dispatch & effects dispatch https://dvajs.com/guide/introduc ...

  4. React dva 的使用

    各大传送门: DvaJS Github DvaJS API与示例 了解 dva- dva = React-Router + Redux + Redux-saga + fetch - dva的初衷是(其 ...

  5. React + Dva + Antd + Umi 概况

    Dva 由阿里架构师 sorrycc 带领 team 完成的一套前端框架,在作者的 github 里是这么描述它的:"dva 是 react 和 redux 的最佳实践". Ant ...

  6. react dva 表单校验

    import React,{ Component } from 'react'; import { connect } from 'dva'; import { WhiteSpace,NavBar , ...

  7. React+dva+webpack+antd-mobile 实战分享(二)

    第一篇 https://segmentfault.com/a/11... 在上一篇文章中教给大家了怎么搭建项目的架子:那么今天我们就来说一下项目里的导航和列表的实现 导航 废话不说啦 下面直接给大家讲 ...

  8. react+dva+antd+umi项目建立操作流程及知识点总结

    0.1 引用 0.1.1 react官网 0.1.2 dva官网 0.1.3 antd-mobile官网 0.1.4 umijs官网 0.1.5 转载文章-umi操作手册 一.what are the ...

  9. React+dva+webpack+antd-mobile 实战分享(一)

    再看本篇文章之前,本人还是建议想入坑react的童鞋可以选有create-react-app来创建react的项目,因为现在dva和roadhog还不成熟,坑相对要多一些,当然如果你已经做好跳坑的准备 ...

随机推荐

  1. 强连通tarjan模版

    #include<stdio.h> #include<iostream> #include<math.h> #include<queue> #inclu ...

  2. kindle 电子书去除DRM

    DRM,Digital Rights Management,数字版权管理. amazon购买的图书会下发到你的kindle设备.电子书格式通常为.azw3.里面包括了DRM,仅仅能在你的设备上使用. ...

  3. 九度OJ 1006 ZOJ问题 (这题測试数据有问题)

    题目1006:ZOJ问题 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:15725 解决:2647 题目描写叙述: 对给定的字符串(仅仅包括'z','o','j'三种字符),推断他能否AC ...

  4. Discuz常见小问题-如何修改UCenter创始人密码

    http://faq.comsenz.com/viewnews-925 参照上面这个帖子,把tools.php下载下来并放到uc_server目录下,打开文件,找到第10行设置一个初始工具箱密码 ht ...

  5. 破解无线网络密码-BT3如何使用2

    本教程只作学习和交流使用,任何其它商用与本人无关, 在开始教程之前, 首先需要用到几个软件,感兴趣的朋友看完贴子后可以去百度搜一下下载地址, 虚拟机: VMware Workstation 6.5 正 ...

  6. Android 的事件传递机制,详解

    Android 的事件传递机制,详解 前两天和一个朋友聊天的时候.然后说到事件传递机制.然后让我说的时候,忽然发现说的不是非常清楚,事实上Android 的事件传递机制也是知道一些,可是感觉自己知道的 ...

  7. php如何实现页面跳转

    •PHP页面跳转一.header()函数 header()函数是PHP中进行页面跳转的一种十分简单的方法.header()函数的主要功能是将HTTP协议标头(header)输出到浏览器. header ...

  8. 2019年所有人必须要掌握的一个技能 - “AI思维”

    或许很多人认为AI只是那些直接从事AI相关岗位的人必须要掌握的技能,但实际上,不分岗位所有人都需要一种能力,那就是“AI思维”.如果没能在合适的时机把自己的认知提升到一定程度,被替代是很自然的事情.在 ...

  9. 一个简单的knockout.js 和easyui的绑定

    <!DOCTYPE html><html><head><meta charset="UTF-8"><title>Basi ...

  10. 使用SpringMVC搭建第一个项目

    概述 使用SpringMVC搭建第一个项目,入门教程,分享给大家. 详细 代码下载:http://www.demodashi.com/demo/10596.html 一.概述 1.什么是Spring ...