react知识点总结---react-router和hooks （六）

最新推荐文章于 2024-04-29 10:56:06 发布

大大黄、

最新推荐文章于 2024-04-29 10:56:06 发布

阅读量712

点赞数

文章标签： react

本文链接：https://blog.csdn.net/first_helloword/article/details/109942380

版权

本文深入探讨了React Router的工作原理，包括URL的hash和HTML5的history模式，以及Router的基本使用，如BrowserRouter和HashRouter。讲解了Link、NavLink、Switch、Redirect和路由嵌套的应用。此外，详细介绍了React Hooks，如useState、useEffect、useContext、useReducer、useCallback、useMemo、useImperativeHandle和useLayoutEffect等，展示了它们如何简化函数组件的开发。还提到了自定义Hook的实践和在不同场景下的性能优化策略。

摘要由CSDN通过智能技术生成

react-router

前端路由的原理

前端路由是如何做到URL和内容进行映射呢？监听URL的改变
URL发生变化，同时引起页面的刷新有另个办法：
- 通过URL的hash改变URL
- 通过HTML5的history模式修改URL

URL的hash

URL的hash
- URL的hash也就是锚点（#），本质是改变window.location的href属性
- 我们可以通过直接复制location.hash来改变href，但是页面不发生刷新

HTML5的history

history接口是HTML5新增的，他有六种模式改变URL而不刷新页面
- replaceState:替换原来的路劲
- pushState:使用新的路径
- popState:路劲的回退
- go:向前或向后改变路径
- forward:向前改变路径
- back：向后改变路径

Router的基本使用

react-router最主要的API是给我们提供的一些组件
- BrowserRouter或者 HashRouter
  - Router中包含了对路径改变的监听，并且会将相应的路径传递给子组件
  - BrowserRouter使用history模式
  - HashRouter使用hash模式
- Link和NavLink
  - 通常路径的跳转时使用Link组件，最终会被渲染成a元素
  - NavLink是在Link基础之上增加了一些样式属性
  - to属性：Link中最重要的属性，用于设置跳转到的路径
- Router
  - Route用于路径的匹配
  - path属性：用于设置匹配到的路径
  - component属性：设置匹配到路径后，渲染的组件
  - exact:精准匹配，只有精准匹配到完全一致的路径才会渲染对应的组件

NavLink的使用

需求：路径选中时，对应的a元素变为红色
这个时候，我们呢要是有NavLink组件来代替Link组件
- activeStyle:活跃时（匹配时）的样式
- activeClassName:活跃时添加class
- exact：是否精准匹配
但是，我们会发现在选中about或 profile时，第一个也会变成红色
- 原因是/路径也匹配到了/about或profile
- 这个时候，我们可以在第一个NavLink中添加上exact属性
默认的activeClassName
- 事实上在默认匹配成功时，NavLink就会添加上一个动态的active class
- 所以我们呢也可以直接编写样式
当然，如果你担心这个class在其他地方被使用，出现样式的层叠，也可以自定义class

Switch的作用

我们来看下面的路由规则
- 当我们匹配到某个路径时，我们会发现一些问题
- 比如/about路径匹配到的同时，/:userid 也被匹配到了，并且最后的一个NoMatch组件总是被匹配到
原因是什么呢？？默认情况下，react-router中只要是路径被匹配到的Route对应的组件都会被渲染
- 但是实际开发中，我们往往希望有一种排他的思想
- 只要匹配到了第一个，那么后面的就不应该继续匹配了
- 这个时候我们可以使用Switch来讲所有的Route进行包裹即可

Redirect

Redirect用于路由的重定向，当这个组件出现时，就会执行跳转到对应的to路径中
我们这里使用这个的一个案例
- 用户跳转到User界面
- 但是在User界面有一个isLogin用于记录用户是否登录
  - true:那么显示用户的名称
  - false：直接重定向到登陆页面

路由的嵌套

在开发中，路由之间是存在嵌套关系的。
这里我们假设about页面中有两个页面内容
- 商品列表和消息列表
- 点击不同的链接可以跳转到不同的地方，显示不同的内容；

手动路由跳转

目前我们实现的跳转主要是通过Link或者 NavLink进行跳转的，实际上我们也可以通过javascript代码进行跳转
但是通过javascript代码进行跳转有一个前提， 必须获取到history对象
如何可以获取到history的对象呢？两种当时
- 方式一：如果该组件是通过路由直接跳转过来的，那么可以直接获取history location match对象
- 方式二：如果该组件是一个普通渲染的组件，那么不可以直接获取history location match对象
那么如果普通的组件也希望获取对应的对象属性应该怎么做呢？
- 前面我们学习过高阶组件，可以在组件中添加想要的属性；
- react-router也是通过高阶组件为我们的组件添加相关的属性的；
如果我们希望在App组件中获取到history对象，必须满足以下两个条件：
- App组件必须包裹在Router组件之内
- App组件使用withRouter高阶组件包裹