预览:(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不同如图:
以下属性重要: