一、概述

  以列表页中的标准列表为主

  

  Ant Design Pro 默认通过只需浏览器单方面就可处理的 HashHistory 来完成路由。如果要切换为 BrowserHistory,那在 src/index.js 中也有对应的内容可以直接修改,但需要在后端服务器进行相应路由配置。

二、详述

加载过程图

  

2.1、菜单→路由→组件

  在左侧的导航栏点击 列表页 > 标准列表 后,可以进入到上面截图所示的页面。导航栏的内容在 src/common/menu.js 中【或者服务获取的地址】

菜单:

      {
name: '列表页',
icon: 'table',
path: 'list',
children: [
{
name: '查询表格',
path: 'table-list',
},
{
name: '标准列表',
path: 'basic-list',
},
//……
],
},

路由

  全局的路由关系是:src/index.js 中通过 app.router(require('./router').default);,将 src/router.js 绑定到 dva 实例的 router 方法上。而在 src/router.js 中又引入了 src/common/router.js 中的 getRouterData 作为数据源。

  其实就是相当于:src/common/menu.js 中 path 所指向的路径对应于 src/common/router.js 中的路由记录。

export const getRouterData = (app) => {
const routerConfig = {
...,
'/list/basic-list': {
component: dynamicWrapper(app, ['list'], () => import('../routes/List/BasicList')),
},
...,
};
...
}

  这里调用了同文件内的 lazy-loading 的动态加载函数 dynamicWrapper,有 3 个参数,app 为全局 dva 实例,models 为一个带有相关 dva Model 的 Array,component 即为该路由记录对应的实际组件。

const dynamicWrapper = (app, models, component) => {...};

  可以看到:

    1、加载路由的时候,会动态加载当前文件下的model文件,也就是对应文件下的src/models/list.js

组件:

  src/routes/List/BasicList.js,具体组件。已省略部分代码

import React, { PureComponent } from 'react';
import { connect } from 'dva';
//……
import PageHeaderLayout from '../../layouts/PageHeaderLayout'; @connect(({ list, loading }) => ({
list,
loading: loading.models.list,
}))
export default class BasicList extends PureComponent {
componentDidMount() {
this.props.dispatch({
type: 'list/fetch',
payload: {
count: 5,
},
});
} render() {
return (
<PageHeaderLayout>{/* 页面内容…… */}</PageHeaderLayout>
);
}
}

2.2、@connect 装饰器

  组件写法中调用了 dva 所封装的 react-redux 的 @connect 装饰器,用来接收绑定的 list 这个 model 对应的 redux store。注意到这里的装饰器实际除了 app.state.list 以外还实际接收 app.state.loading 作为参数,这个 loading 的来源是 src/index.js 中调用的 dva-loading这个插件。

/*
* src/index.js
*/
import createLoading from 'dva-loading';
app.use(createLoading());

它返回的信息包含了 global、model 和 effect 的异步加载完成情况。

数据map一

{
"global": true,
"models": {
"list": false,
"user": true,
"rule": false
},
"effects": {
"list/fetch": false,
"user/fetchCurrent": true,
"rule/fetch": false
}
}

注意到在这里带上 {count: 5} 这个 payload 向 store 进行了一个类型为 list/fetch 的 dispatch,在 src/models/list.js 中就可以找到具体的对应操作。

import { queryFakeList } from '../services/api';

export default {
namespace: 'list', state: {
list: [],
}, effects: {
*fetch({ payload }, { call, put }) {
const response = yield call(queryFakeList, payload);
yield put({
type: 'queryList',
payload: Array.isArray(response) ? response : [],
});
},
/* ... */
}, reducers: {
queryList(state, action) {
return {
...state,
list: action.payload,
};
},
/* ... */
},
};

View中使用

1、connect使用

@connect(({ list, loading }) => ({
list,//①
loading: loading.models.list,//②
}))

  说明:

    1、connect 有两个参数,mapStateToProps以及mapDispatchToProps,一个将状态绑定到组件的props一个将方法绑定到组件的props

    2、代码①:将实体list中的state数据绑定到props,注意绑定的是实体list整体,使用时需要list.[state中的具体变量]

    3、代码②:通过loading将上文“数据map一”中的models的list的key对应的value读取出来。赋值给loading,以方便使用,如表格是否有加载图标

      当然代码②也可以通过key value编写:loading.effects["list/fetch"]

2、变量获取

因,在src/models/list.js

export default {
namespace: 'list', state: {
list: [],
},

故在view中使用

  render() {
const { list: { list }, loading } = this.props;

说明:

  定义使用时:list: { list }  ,含义实体list下的state类型的list变量

001-ant design pro 页面加载原理及过程,@connect 装饰器的更多相关文章

  1. Web访问原理-从输入URL到页面加载完成的过程中都发生了什么事情?

    从输入URL到页面加载完成的过程中都发生了什么事情?--这是一个经典的面试题: 主要是关于计算机网络方面的知识基础,对于非科班计算机自学web开发的同学可能理解起来就很困难. StackOverFlo ...

  2. 从输入 URL 到页面加载完成的过程中都发生了什么事情?

    这个问题是老生常谈的问题啦,虽然说到处百度都有的答案,还是希望自己能总结一下. 如今有很多答案,都是从硬件开始讲起,比如键盘的响应或者触屏的响应,然后CPU处理到OS的内核等等.这里不作为重点来讲,要 ...

  3. 从输入 URL 到页面加载完成的过程中都发生了什么

    从输入 URL 到页面加载完成的过程中都发生了什么 过程描述 浏览器查找域名对应的 IP 地址: 浏览器根据 IP 地址与服务器建立 socket 连接: 浏览器与服务器通信: 浏览器请求,服务器处理 ...

  4. 从输入 URL 到页面加载完成的过程详解---【XUEBIG】

    从输入 URL 到页面加载完成的过程中都发生了什么事情? 这是一道经典的面试题,涉及面非常广,要答出来并不困难,当要将问题回答好却不是那么容易 过程概述 浏览器查找域名对应的 IP 地址: 浏览器根据 ...

  5. 【转】 从输入 URL 到页面加载完成的过程中都发生了什么事情?

    该问题总结 一. 往浏览器输入URL后给你一个页面,你天天在使用的东西,学过计算机网络的知道是怎么回事,就DNS解析然后页面的回馈,不过要讲好还是有难度. 之前fex团队的nwind专门写过这个问题的 ...

  6. http系列--从输入 URL 到页面加载完成的过程

    一.前言 这道题的覆盖面可以非常广,很适合作为一道承载知识体系的题目.每一个前端人员,如果要往更高阶发展,必然会将自己的知识体系梳理一遍,没有牢固的知识体系,无法往更高处走! 二.主干流程 在将浏览器 ...

  7. Ant Design按需加载

    不eject情况下配置antd按需加载 1.安装 react-app-rewired yarn add react-app-rewired 2. 项目根目录下新建 config-overrides.j ...

  8. [转]从输入url到页面加载完成的过程中都发生了什么事情

    第一个问题:从输入 URL 到浏览器接收的过程中发生了什么事情? 从触屏到 CPU 首先是「输入 URL」,大部分人的第一反应会是键盘,不过为了与时俱进,这里将介绍触摸屏设备的交互. 触摸屏一种传感器 ...

  9. 从输入URL到页面加载完成的过程中都发生了什么事情?

    为了便于理解,我将整个过程分为了六个问题来展开. 第一个问题:从输入 URL 到浏览器接收的过程中发生了什么事情? 从触屏到 CPU 首先是「输入 URL」,大部分人的第一反应会是键盘,不过为了与时俱 ...

随机推荐

  1. Static int data语句说明data为类变量,为一个类的共享变量,属于整个类

    面向对象高级:  修饰符: static:①可修饰变量(属性):②可修饰方法:③可修饰代码块. Static int data语句说明data为类变量,为一个类的共享变量,属于整个类. Int dat ...

  2. PHPmailer发送邮件时的常见问题及解决办法

    来源:http://www.chinastor.com/a/jishu/mailserver/0G392262014.html 使用PHPmailer发送邮件时的常见问题总结: 一,没有定义发送邮箱$ ...

  3. [转] 关于EJB分析

    转自:http://blog.csdn.net/jojo52013145/article/details/5783677 1. 我们不禁要问.什么是"服务集群"?什么是" ...

  4. Python3x 爬取妹子图

    思路:1.get_totalpages(url)  通过[性.感.美.女.图]获得该版块的总页数 [首页1234567891011下一页末页共 21页1034条] 2.get_sercoverurl( ...

  5. 简单配置Nginx 指向本地端口,并开启SSL

    简单配置Nginx 指向本地端口,并开启SSL,如果要开启SSL,必须使用域名去申请SSL key,一般是两个文件,一般是要收费的. # 在/etc/nginx/nginx.conf 的文件中有下面一 ...

  6. POJ 2567 Code the Tree &amp; POJ 2568 Decode the Tree Prufer序列

    题目大意:2567是给出一棵树,让你求出它的Prufer序列.2568时给出一个Prufer序列,求出这个树. 思路:首先要知道Prufer序列.对于随意一个无根树,每次去掉一个编号最小的叶子节点,并 ...

  7. TArray<uint8>转FString

    void ARamaUDPReceiver::Recv(const FArrayReaderPtr& ArrayReaderPtr, const FIPv4Endpoint& EndP ...

  8. Android无线测试之—UiAutomator UiWatcher API介绍一

    UiWatcher类介绍与中断监听检查条件 一.UiWatcher类说明 1.Uiwatcher用于处理脚本执行过程中遇到非预想的步骤 2.UiWatcher使用场景 1)测试过程中来了一个电话 2) ...

  9. SPOJ 375 QTREE

    题目链接:传送门 题目大意:给一棵无根树,树边有权值,有很多次操作,QUERY代表询问从 x 到 y 路径上的边的最大 权值,CHANGE代表改变按输入顺序第 x 条边的权值为 y. 对于每个QUER ...

  10. centos-iptables-scripts

    author:headsen chen date:2018-06-04  11:20:38 notice:This  article is created by headsen chen himsel ...