【React】路由,Hooks

❤️ Author: 老九
☕️ 个人博客:老九的CSDN博客
个人名言:不可控之事 乐观面对
系列专栏:

文章目录

  • 路由
    • Navigate导航组件
    • 路由的嵌套
    • useNavigate
    • 路由传递参数
    • route配置抽取
  • Hook
    • useState
    • Effect Hook
    • useContext
    • useCallback
    • useMemo
    • useRef
    • 自定义Hook

路由

在这里插入图片描述
【React】路由,Hooks_第1张图片
【React】路由,Hooks_第2张图片

  • 通过Link组件就可以点击跳转【React】路由,Hooks_第3张图片

Navigate导航组件

  • 用于重定向
    【React】路由,Hooks_第4张图片

路由的嵌套

  • 在父路由中写link表示跳转到哪,然后需要一个outlet占位符组件
    【React】路由,Hooks_第5张图片
    在app.jsx中写route嵌套
    【React】路由,Hooks_第6张图片

useNavigate

  • 这是一个hook函数,可以通过这个不局限于link跳转了
    【React】路由,Hooks_第7张图片
    如果需要在类组件中用useNavigate,需要通过高阶组件进行拦截封装【React】路由,Hooks_第8张图片

路由传递参数

通过动态路由
在这里插入图片描述
然后通过高阶组件实现跳转
【React】路由,Hooks_第9张图片
然后通过useParams高阶函数获取到id

【React】路由,Hooks_第10张图片
通过navigate传值
在这里插入图片描述

  • 通过啊useLocation获取state
    在这里插入图片描述

route配置抽取

【React】路由,Hooks_第11张图片

  • 通过useRoutes的hook实现

在这里插入图片描述

  • 路由懒加载
    在这里插入图片描述
    如果我们对某些组件进行了异步加载(懒加载),那么需要使用Suspense进行包裹
    【React】路由,Hooks_第12张图片

Hook

  • 为什么需要Hook?让我们在不编写类组件的情况下使用state以及其他的React特性(生命周期)
  • 函数式组件当我们修改state的时候,组件不知道重新进行渲染
  • rfce可以快速创建函数式组件 ,如果要包裹一个memo,就要用rmc
  • 使用hook的话只能在函数的顶层调用hook,只能在函数式组件中使用Hook

useState

  • useState小括号里传入初始值,返回一个数组,第一个是值,第二个是方法,数组解构
    【React】路由,Hooks_第13张图片

【React】路由,Hooks_第14张图片

Effect Hook

  • Effect可以让你来完成一些类似于class中声明周期的功能,类似于完成网络请求,手动更新DOM,一些事件的监听
  • 通过useEffect的Hook,可以高速度React需要在渲染后执行某些操作,useEffect要求我们传入一个回调函数,在React执行完更新DOM操作后,就会回调这个函数
  • 一个函数组件中可以有多个useEffect,是按照顺序执行的
    【React】路由,Hooks_第15张图片
    返回值是一个回调函数,在组件被重新渲染或者组件被卸载的时候执行
    【React】路由,Hooks_第16张图片
  • 还可以传第二个参数,第二个参数是一个数组,根据数组里的值哪个改变了,才重新执行回调函数
    【React】路由,Hooks_第17张图片
    【React】路由,Hooks_第18张图片

useContext

【React】路由,Hooks_第19张图片
【React】路由,Hooks_第20张图片
【React】路由,Hooks_第21张图片

useCallback

  • 当我们需要将一个函数传递给子组件的时候,最好使用useCallback进行优化,将优化之后的函数传递,防止重新渲染父组件的时候,子组件的函数也跟着重新调用
    【React】路由,Hooks_第22张图片

useMemo

  • 类似于vue的computed,对于某一个属性的操作比较复杂,而每次调用render函数都需要重新创建函数实例,这样操作比较复杂的数据就会影响性能,通过useMemo就可以判断如果数据没有发生变化,就使用之前的数据就可以了

【React】路由,Hooks_第23张图片

useRef

【React】路由,Hooks_第24张图片

自定义Hook

  • 自定义Hook本质上只是一种函数代码逻辑的抽取
    【React】路由,Hooks_第25张图片
    监听滚动位置
    【React】路由,Hooks_第26张图片
    【React】路由,Hooks_第27张图片

————————————————————————
♥♥♥码字不易,大家的支持就是我坚持下去的动力♥♥♥
版权声明:本文为CSDN博主「亚太地区百大最帅面孔第101名」的原创文章

你可能感兴趣的:(#,React,react.js)