React爬坑之路-Dva

最近在看前端React框架的内容时，发现React不像Vue那样容易理解。

在看了教程以及学习了相关内容以后，我想着记录下自己对于React的理解方面，对初学者会很有帮助。

我是站在巨人肩膀上的牛顿。

React官网：https://reactjs.org/

菜鸟教程：http://www.runoob.com/react/react-tutorial.html

ES6入门:http://es6.ruanyifeng.com/

Ant Design：https://ant.design/index-cn

Redux:https://www.redux.org.cn/

Dva：https://github.com/dvajs/dva

首先是Dva创建完工程以后就会出现下面的目录。不知道怎么创建Dva工程的在下一篇再讲。

Dva工程的目录结构如下：

这是目录结构

index.js为主入口文件。

router.js为路由初始化文件。

asserts用于存放静态资源，里面会包含图片、样式文件等一些静态资源。

components用于存放公共组件，包含页面、头尾、导航条。

routes用于存放路由组件，可以通俗的理解成页面。与component的区别在于一般是非公共的并且会跟model里的数据模型联系起来。

models用于存放模型文件，模型文件里面包含state（数据）、effects（异步方法），在异步方法中我们可以实现发送网络请求到服务器、reducer（同步方法），通过connect跟routes里面的组件进行绑定。routes中的组件通过connect拿到model中的数据，model也能通过connect接收到组件中dispatch的action。

services用于存放跟后台交互的服务文件，一般都需要调用后台的接口。

utils用于存放工具类库。

整体的流程大致是：

从index入口进入 ＞ 在router.js文件中通过url匹配routes里的组件＞ components里的组件dispatch action ＞ model通过action改变state（中间可能会通过services跟后端服务器进行交互） => components里的组件通过connect重新渲染routes中的数据。

React数据交互流程

同学们可能在理解上面的图时会遇到困难。关键的地方是在component里面的组件中，要想实现数据交互就得使用Action，而action需要dispatch发送到模型中进行相应的数据交互，访问完成以后dav框架提供了connect，它会把数据在component里面的组件中重新渲染。下面我使用代码在详细展示一下，帮助同学们很好的理解我说的内容。

modelmo模型文件

关于connect加载数据的说明

上面红线部分就实现了通过connect方式获取model中state里面的数据。