2021-10-31

react路由的作用

能够掌握react-router-dom的基本使用

能够使用编程式导航跳转路由

能够知道React路由的匹配模式

react路由介绍
现代的前端应用大多都是spa（单页应用程序），也就是只有一个HTML页面的应用程序。因为它的用户体验更好，对服务器的压力更小，所以更受欢迎，为了有效的使用单个页面来管理原来多页面的功能，前端路由应运而生。
前端路由功能：让用户从一个视图导航到另一个视图
前端路由是一套映射规则，URL路径与组件的对应关系
使用react路由，配置路径和组件
路由的基本使用
路由的执行过程
编程式导航
默认路由
匹配模式

使用步骤：
1.yarn add react-router-dom
2.导入路由的三个核心组件：Router/Route/Link
import {VrowserRouter as Router ,Route,Link} from ‘react-router-dom’
3.使用Router组件包裹整个应用
4.使用Link组件作为导航菜单（路由入口）
常见组件说明
Router组件：包裹整个应用，一个React应用只需要使用一次
两种常用组件：HashRouter和BrowserRouter
HashRouter 利用URL的哈希值实现hash值
BrowserRouter：使用H5的historyAPI实现

路由的执行过程
1.点击Link组件，修改了地址栏中的url
2.React路由监听到地址栏url的变化
3.react路由内部便利所有的route组件，使用路由规则path与pathname进行匹配
4.当路由规则（path）能够匹配地址栏中pathname，就展示该Route组件的内容

编程式导航：
js代码实现页面跳转
history是React路由提供的，用于获取浏览器历史记录的相关信息
this.props.history.push(’/home’)
默认路由：
进入页面时就会匹配的路由
这就是默认路由了

匹配模式：
默认情况下，react路由是模糊匹配模式
模糊匹配规则：只要pathname以path开头就会匹配成功
精确匹配：
给Route组件添加exact属性，让其变成精确匹配模式

react原理揭秘
能够setState()更新数据是异步的
更新数据是异步的，多次setState 只触发一次render
this.setState((state,props)=>{
//state 表示最新的state props表示最新的props
return(
count:state.count+1
)
})
setState：在状态更新（页面完成重新渲染）后且重新渲染后，立即执行某个操作
this.setState((state,props)=>{
//state 表示最新的state props表示最新的props
return(
count:state.count+1
)
}，()=>{document.title=‘更新state后的标题：’+this.state.count})
能够知道JSX语法的转化过程
JSX仅仅是createElement()方法的语法糖
再转化为React元素 js对象
JSX语法被@babel/preset-react插件编译为createElement()方法
能够说出React组件的更新机制
setState()的两个作用 1.修改state 2.更新组件UI
能够对组件进行性能优化
能够说出虚拟DOM和Didd算法