react路由守卫、路由监听等总结

1、路由守卫（拦截）

react框架没有路由守卫功能，只能通过在路由里设置meta元字符实现路由拦截。路由拦截就是路由在发生变化时需要进行的拦截处理。

2、监听路由变化

方式：

1、路由下的内容组件通过history对象来进行监听

class Header extends Component {componentDidMount() {// 监听路由的变化,如果路由发生变化则进行相应操作this.props.history.listen(location => {// 最新路由的 location 对象，可以通过比较 pathname 是否相同来判断路由的变化情况if (this.props.location.pathname !== location.pathname) {// 路由发生了变化}})}
}

2、组件重新渲染前后（使用 componentWillReceiveProps 、 componentDidUpdate 、componentWillUpdate）

class Header extends Component {componentWillReceiveProps (nextProps, nextState) {if (this.props.location.pathname !== nextProps.location.pathname){// 路由发生了变化}}
}

3、hooks方式监听

import React, { useEffect } from 'React';
const Header = function (props) {useEffect(() => {console.log(props.location);}, [props.location])
}
export default Header;

react组件创建方式分为类组件和函数组件（最佳）。

纯函数组件优点是比类组件更加轻便。

（纯函数：返回结果只依赖于它的参数，而且没有任何可观察的副作用，函数与外界交流数据只通过参数和返回值）

纯函数组件也有以下不太好的地方：

1、纯函数组件没有状态

2、纯函数组件没有生命周期

3、纯函数组件没有this

4、只能是纯函数

为此React团队设计出了React Hooks（英文意思是“钩子”）。React默认有四种常用的钩子：

1、useState(): 状态钩子

用法与class的this.setState基本一致

2、useContext():共享状态钩子

Context实现跨层级的组件数据传递，既不需要在组件树中通过逐层传递props或者

state方法来传递数据。

该钩子的作用，在组件之间共享状态，其作用就是可以做状态的分发，作用是避

免了react逐层通过Props传递参数

3、useReducer():Action钩子

4、useEffect():副作用钩子

（副作用：在React组件中执行比如修改外部作用域/全局变量、修改传入的参数、发送请求、console.log、手动修改DOM都属于副作用）

react路由守卫、路由监听等总结相关推荐

window.open 打开vue路由，并监听页面关闭事件，监听子父页面消息传递
name:路由 query:传递参数 const page2 = this.$router.resolve({name:'addHs',query:{hsCode:row.hsCode}}); var ...
查看 linux 硬件信息：内存、分区、系统、环境变量、防火墙、路由、端口监听、进程、CPU...
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 一.linux CPU大小: 其实应该通过Physical Processor ID来区分单核和双核 ...
路由守卫 /路由拦截
1. 在访问一个页面的时候也就是在进行路由跳转的时候,把这个跳转拦下来做一些判断或者操作然后来执行是继续访问这个页面还是执行别的操作路由的导航守卫又叫路由的生命周期函数也叫路由的钩子函数 ...
SpringCloud集群的搭建，分布式的实现，负载均衡的几种方式，路由，页面监听
SpringCloud 服务注册与发现--Netflix Eureka 负载均衡: 客户端负载均衡--Netflix Ribbon 服务端负载均衡:--Feign(其也是依赖于Ribbon,只是将调用 ...
react路由配置,路由跳转与传值,路由监听
1.react路由配置 1.1 下载react的路由模块 (默认最新6.3, 如需使用5.x, 在模块名后加@5) npm install react-router-dom --save // 6.0 ...
angularjs -- 路由监听
前几天,项目在做一个功能时需要在页面切换之前关闭正在执行的函数.尝试了几种方式都不行,最后想到既然angularjs是通过理由切换页面,那就在路由上面做文章吧.AngularJS在路由发生改变时,可以 ...
vue-cli 初始化创建 vue2.9.6 项目路由守卫、封装axios、vuex
阅读目录 Vue如何封装Axios请求 1 安装axios 2 封装代码 axios 应用方式 Vue 中的路由守卫使用演示 1 全局守卫 2 组件级守卫 3 单个路由独享的守卫 4 官网整个路由守 ...
路由的导航守卫过渡动效transtion导航守卫路由懒加载路由元信息 @stage3---wee2--day7
# 路由的导航守卫别名: 导航守卫路由守卫路由钩子路由拦截作用: - 类似 [保安] 守卫路由进举例: 携带数据进出举例: 事情完成才能出导航守卫一共有三种形式 [ 项目三选一 ] ...
angular学习总结-路由和路由守卫
通过命令新建页面news: ng g page news 会在src/app目录下自动生成以下文件,并更新app-routing.module.ts总路由文件. 再来看看app-routing.mod ...
vue2路由手动创建二级路由路由传参路由守卫打包上线
路由手动配置: #在@vue/cli创建的项目中,路由用法如下. 1.安装路由npm install vue-router@32:定义路由所需的组件(.vue文件)要实现页面about 和home两个 ...

react路由守卫、路由监听等总结

react路由守卫、路由监听等总结相关推荐

最新文章

热门文章