一起学react(2) dva底层源码与案例分析

2018-03-27 本文已影响1726人 fangkyi03

本次主要针对antd-pro案例来进行分析

用到的技术栈: dva dva-core antd-admin

之前写的一篇dva入手教程反响挺不错的今天就来点了解一下dva的核心代码

本人QQ:469373256 如果有问题可以加我QQ

antd-pro官网

你可以使用集成化的命令行工具 ant-design-pro-cli。

$npminstallant-design-pro-cli -g

$mkdirmy-project&&cdmy-project

$ pro new# 安装脚手架

项目初始化部分

一步步的来进行讲解先看一下接下来的代码分析将会按照编号的顺序一点点往下讲

#1:dva初始化部分源码地址:dva/packages/dva at master · dvajs/dva · GitHub

这里主要是看几点

1.首先history部分如果你没有传进去history的话会默认给你使用HashHistory

2.你原来所有传进去的参数又会被转换成createOpts 这部分现在还用不到在之后会讲到

3.这里通过将构造好的createOpts传递给core以后返回了一个app 但是这里要注意的是刚才第一个页面的时候用到的router跟start其实都是在这里进行定义的dva-core本质是没有返回这部分数据的

#2: model加载部分源码地址:dva/index.js at master · dvajs/dva · GitHub

model部分的代码都是在dva-core里面的

这里这个model有点小小的区别

如果你这个app.model是在app.start之前调用的会走的是这个

而如果你在app.start之后调用的话会走这个一般用在按需加载的视图上面

先针对第一个model做一下分析第一个model代码很少第二个model部分会在start以后进行讲解

其中checkModel是用来判断是否已经加载过对应的model了

prefixNamespace 这个是帮你构建一下函数对应的名字比如你的app.model.effect下面有个*getapp({payload},{select,put,call})

这样的函数名字那么通过这个prefixNamespace转换以后就会变成app/getapp

帮你进行了一下转换附上对应的源码

#3 router加载部分 源码地址:dva/index.js at master · dvajs/dva · GitHub

router部分是在执行了app.start以后才会被触发的所以这里是看不到的

但是可以提前了解一下

如果这里的app.start(container)有值的话会直接调用render来进行渲染这里就是将刚才的app._router传递了过去记得刚才这个是有判断的这个app._router必须是一个function 否则是会有问题的再来看看具体的传参

这里其实就很明显了刚才的那个app.start(container)这个变量其实会被react-dom进行使用具体可以看react-dom的文章这边不细说

来看看关键的getProvider 这里你可以发现我们刚才用到的app._router被传递了进来并且变成了Provider的children来实现

那么再进一步去看看这个app._router究竟干了什么

这部分的代码比较多先贴主要部分的

这里可以看到我们刚才传递进来的这个app跟history这两个都非常重要在后面会使用到

这里单个的route就不说了我想你们比我也清楚

主要看看这个routes部分

从这里可以发现除了path参数部分其他的都被涵盖到了...dynamics这个里面这是es6的语法具体可以了解一下阮一峰的es6

有一点了解过route这个组件的话其实会知道这里是通过path去加载对应的组件的并不是这边map了以后就全部都被加载了

看一下react-router-dom 中switch部分的代码

这里可以清楚的看到如果匹配才会调用cloneElement返回视图否则仅仅只返回一个null而已

继续往下说我们现在假设我们的组件被符合调教需要被加载了那么我们的model又是什么时候被加载进去的呢这里得深入的去看一下这个dynamic 这是一个高阶组件

这里的设计非常巧妙得一步步的看下去

1.这里对config传进来的参数做了一下重命名

2.如果你的config里面有传进来resolve的话默认就会调用你传进来的那个这样你可以更加的自定义一点如果没有的话就返回默认的函数

3.判断model是否是有内容如果没有返回一个空数组并且直接调用resolveComponent返回对应要渲染的视图

4.判断model内容如果不符合就直接抛出去

5.如果内容符合的话就遍历加载app.model进行加载所以model是在这里被进行加载的

6.如果你想对LoadingComponent进行自定义的话你就可以通过在config里面传参的方式

接下来看看关键的asyncComponent部分代码

1.初始化loadComponent与asyncComponent 这里loadComponent是可以自己指定的只要你的config里面有带上就可以自定义了

2.开始加载load视图

3.首先在load这边进行resolve的时候因为promise是一个异步也就是一个微任务的关系所以有可能会出现在render之前运行所以在之后对this.mounted进行了判断如果已经到了didMount中的话说明已经走了render 所以必须用setState来刷新而反之没有经过render的话这里不需要用setState来刷新只需要直接赋值就可以了然后在render里面就可以获取到对应的最新数据了

ok router部分讲完了接下来看start部分

#start部分

dvacore源码地址:dva/index.js at master · dvajs/dva · GitHub

dva源码地址:dva/index.js at master · dvajs/dva · GitHub

这个start比较特殊它其实有两个地方在执行一个是dva 一个是dva-core

dva部分: