第二个项目 基于React技术学习的pc端项目

介绍：

1.本项目使用umi脚手架搭建项目，并将umi升级到3.5.0版本，采用模块化、组件化、工程化模块开发方式； umi脚手架开发有什么好处 为什么要用umi进行项目开发？

2.用react-router-dom实现前端路由部署，使用AntD进行组件库构建界面，利用axio中的get方法实现API数据的显示。

说一下对React Router的理解，常用的Rouer组件有哪些？

说一下react-router有哪几种模式，实现原理是什么？

3.组件内使用setState添加状态，useEffect处理异步；将useSelector、useDispatch代替connect连接组件，使用redux作跨组件实现状态共享。增强代码可读性、提高源代码可维护性和整体结构和功能。

说一下setState添加状态和useEffect处理异步原理和具体操作时如何的，这些状态如何实现？

1）umi脚手架开发有什么好处 为什么要用umi进行项目开发？ 

Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。 然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。

特点：

· 可扩展： Umi 实现了完整的生命周期，并使其插件化，Umi 内部功能也全由插件完成。此外还支持插件和插件集，以满足功能和垂直域的分层需求。
· 开箱即用： Umi 内置了路由、构建、部署、测试等，仅需一个依赖即可上手开发。并且还提供针对 React 的集成插件集，内涵丰富的功能；
· **完备路由：**同时支持配置式路由和约定式路由，同时保持功能的完备性，比如动态路由、嵌套路由、权限路由等等。
· 兼容性低： 不支持 IE 8 及以下浏览器，不支持 React 16.8.0 以下的 React，不支持Node 10 以下的环境；
快速上手：

node -v
// 使用yarn全局安装umi
yarn glabal add umi
// 创建项目
mkdir umiAppDemo
// 进入项目文件夹
cd umiAppDemo
// 创建页面
umi g page index
// 启动项目
umi dev
// build打包，会创建一个dist文件
umi build

 2) 说一下对React Router的理解，常用的Rouer组件有哪些？

 reacter-router:可以实现无刷新条件下切换显示不同的页面

路由的本质 就是页面URL发生变化时，页面的显示结果可以根据URL的变化而变化，但是页面不会刷新。

react-router主要分成了几个不同的包：

• react-router: 实现了路由的核心功能

• react-router-dom： 基于 react-router，加入了在浏览器运行环境下的一些功能

• react-router-native：基于 react-router，加入了 react-native 运行环境下的一些功能

• react-router-config: 用于配置静态路由的工具库

 有哪些 react-router-dom 常用的API：

• BrowserRouter、HashRouter
• Route
• Link、NavLink
• switch
• redirect

参数传递：

这些路由传递参数 主要分成了三种形式：

• 动态路由的方式
• search传递参数
• to传入对象

3）说一下react-router有哪几种模式，实现原理是什么？ 

在单页应用中，一个web项目只有一个html页面，一旦页面加载完成之后，就不用因为用户的操作而进行页面的重新加载或者跳转，其特性如下：

• 改变 url 且不让浏览器像服务器发送请求

• 在不刷新页面的前提下动态改变浏览器地址栏中的URL地址

其中主要分成了两种模式：

• hash 模式：在url后面加上#，如http://127.0.0.1:5500/home/#/page1
• history 模式：允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录

（4）说一下setState添加状态和useEffect处理异步原理和具体操作时如何的，这些状态如何实现？