预览：（fetch发送请求、SPA、连续解构赋值、消息订阅、react router路由第三方库）

1、连续解构赋值

总结：

1、连续解构赋值的写法：对象包对象，第二个解构的value一定也是在{}内部的写法

2、消息订阅发布 （适用于所有组件之间通信）

数据更新-发布消息

 消息订阅：挂载中订阅和修改状态，卸载生命周期函数中取消订阅

3、fetch发送请求

   请求方案：

1、xhr、 jquery、axios(都是基于xhr封装的请求方法）

 2、fetch发送请求（也是window的方法）

代码优化： 出错放到catch里面

try catch优化

4、 SPA单页面应用

5、对路由的理解

映射关系：key是path,value就是组件，用于展示不用的页面内容

 

6.路由的基本使用

路由和路由器：路由器是管理路由的，路由器（router）和路由（routes）

react router dom路由第三方库(相比较react router用于web端更有针对性）：

•   是react的一个插件库
•   专门用来实现一个SPA应用
•   基于react的项目基本都会用到此库

安装 ：npm i react-router-dom

中文文档官网：

React Router: Declarative Routing for React.js (docschina.org)

   （1）.基本使用：

          明确好界面中的导航区、展示区

          导航区的a标签改为Link标签

          展示区写route标签进行路径的匹配

          app最外侧包裹一个<BrowserRouter>

上面的代码会有问题：BrowserRouter只需要一个，包路由链接和注册路由。才能切换内容。最理想的方式是在入口文件中的App组件实例挂载的地方包裹一个路由BrowserRouter。

 

7、页面组件：

组件分路由组件和一般组件（通过配置路由路径，和路径匹配点击之后展示的是路由组件，不需要配置路由的是一般组件）

区别：1.props不同：一般组件的props没有传就是{}空对象，传递什么就收到什么，路由组件默认是有数据的，接收三个固定的属性。2、3不同如图：

 以下属性重要：