React + Redux + React-Router的学习

本人其实是一位Java开发者、利用空余的时间学习一下前端技术。在学习的过程也遇到了不少问题、所以通过文章的方式分享给初学者。文章写得不好、请大神们多多指点。

介绍：

React：React主要用于构建UI、通俗一点就是React将页面划分为多个模块、每个模块都是相互独立、每个模块就是一个组件。由多个模块拼凑成一个完整的页面。(组件：从UI界面进行分析、把一些可服用的UI元素抽取为单独的组件；便于项目的开发、维护)

Redux：Redux用户维护项目中数据及状态、组件与组件无数据的传递、所有的数据都将有由Redux进行统一维护。

React-Router：实现URL地址和界面的同步

简单理解：React控制页面、Redux控制数据、React-Route控制你去哪里

开始学习：

众所周知React有很多出名的脚手架、我使用过React官方提供的脚手架（不建议使用）因为官方提供的脚手架构建的项目使用的是原生的Redux、对初学者不是很友好。我使用的第二个脚手架就是UmiJS、UmiJS对Redux进行封装为dva、使用的舒适度比较高、理解程度低（这只是个人观念）。

一、项目构建

1. 原生的React脚手架构建方式请参考：https://www.jianshu.com/p/90ec01ee9a91
2. UmiJS脚手架的构建方式请参考：https://umijs.org/zh/​​​​​​

     二、入门学习

           1、项目的入口文件是？

                 ①、找到src\pages\.umi\router.js查看路由的配置

                 ②、查看路由的配置

           2、项目的结构是怎么样的？

                 ①、src\model ：整个项目的仓库文件夹

                 ②、src\pages ：项目的页面文件夹

                 ③、src\services：项目的请求文件夹

                 ④、src\components:项目的组件

           3、项目是如何配置Router？  

                 ①、不能修改src\pages\.umi\router.js（切记）、因为.umi文件夹下面的所有文件全是临时文件、当项目重新编译后、你修改的全部被覆盖。

                 ②、UmiJS中提倡约定大于配置、src\pages文件夹中的页面都会自动生成路由。并且路由的地址就是文件夹的嵌套层级（例如：xxx/yyyy/userIndex.js     匹配路由为/xxx/yyyy/userIndex）

                 ③、动态路由（文件夹名：x/y/$id.js  匹配路由为：/x/y/:id）

                 ④、使用UmiJS无需配置Router

          4、项目如何加载Model？    src\model中的文件全部自动加载、命名空间是文件名

          5、UmuJS是如何维护数据的？ 

                ①、就是src\model中文件夹在维护数据

                

            6、 connect的使用方式？  

                  ①、connect的作用是将组件和models结合在一起。将models中的state绑定到组件的props中。

                  ②、@connect返回是仓库数据  格式如下

                         

                 ③、connect作为方法时：返回为一个React组件。需要两个参数：mapStateToProps()、mapDispatchToProps()

                        

                    ④、主要import的文件、导入dva中connect