react路由原理解析[通俗易懂]

react路由原理解析[通俗易懂]原理:在dom渲染完成之后,给window添加  “hashchange”事件监听页面hash的变化,并且在state属性之中添加了route属性,代表当前页面的路由。 1、当点击连接 页面hash改变时,触发绑定在window上的  hashchange事件, 2、在hashchange事件中改变组件的state中的route属性,(react组件的state属性改变时

大家好,又见面了,我是你们的朋友全栈君。

原理: 在dom渲染完成之后,给window 添加   “hashchange” 事件监听页面hash的变化,并且在state属性之中添加了 route属性,代表当前页面的路由。

1、当点击连接  页面hash改变时,触发绑定在window 上的  hashchange 事件,

2、在 hashchange 事件中改变组件的 state中的 route 属性,(react组件的state属性改变时,自动重新渲染页面)

3、页面 随着 state 中的route属性改变自动 根据  不停的hash  给  Child  变量赋值不通的组件,进行渲染

核心代码:

import React
from
‘react’
import { render }
from
‘react-dom’

const
About
=
function () {
return <
div>111</
div>
}
const
Inbox
=
function () {
return <
div>222</
div>
}
const
Home
=
function () {
return <
div>333</
div>
}

class
App
extends
React.
Component {

state
= {
route: window.location.hash.
substr(
1)
}

componentDidMount() {
window.
addEventListener(
‘hashchange’, ()
=> {
this.
setState({
route: window.location.hash.
substr(
1)
})
})
}

render() {
let Child
switch (
this.state.route) {
case
‘/about’: Child
= About;
break;
case
‘/inbox’: Child
= Inbox;
break;
default: Child
= Home;
}

return (
<
div>
<
h1>App</
h1>
<
ul>
<
li><
a
href
=
“#/about”>About</
a></
li>
<
li><
a
href
=
“#/inbox”>Inbox</
a></
li>
</
ul>
<
Child />
</
div>
)
}
}

render(<
App />, document.body)

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/141862.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 国际私法自考总结复习大纲

    国际私法自考总结复习大纲

  • asp中的session使用方法详解

    asp中的session使用方法详解ASP中: SESSION必须倚赖COOKIE才可用,SESSION是存储在服务器端的,而COOKIE是存储在客户端的,相对而言,SESSION的安全性和可靠程度都比COOKIE高 ASP.NET中 SESSION可以不依赖COOKIE而存在!!! 也就是说,从微软的方面来说,开始让SESSION摆脱COOKIE的束缚了!!Session数据是存储在服务器上的,C

  • 手把手教你制作机房三维场景(3D效果图)

    手把手教你制作机房三维场景(3D效果图)前言:随着信息技术的不断发展,大量数据中心机房的建设、监控软件已经成为机房管理者的重要武器,特别是机房效果图这一块,从简易的CAD到现在的3D效果图,从静态到三维动态的改进,机房监控软件基本上可以说是从无到有的一个过程,下面本文跟大家分享机房高大上的数据中心三维可视化管理软件的三维场景制作过程(俗称:3D效果图的制作过程)。以前的机房效果图现在的机房3D效果图数据中心可三维可视化管理软件,通过对现

  • ALLuxio_Alluxio公司怎么样

    ALLuxio_Alluxio公司怎么样一、什么是AlluxioAlluxio(之前名为Tachyon)是世界上第一个以内存为中心的虚拟的分布式存储系统。它统一了数据访问的方式,为上层计算框架和底层存储系统构建了桥梁。应用只需要连接Alluxio即可访问存储在底层任意存储系统中的数据。此外,Alluxio的以内存为中心的架构使得数据的访问速度能比现有常规方案快几个数量级。在大数据生态系统中,Alluxio介于计算框架(如Apache…

    2022年10月22日
  • linux下搭建kafka集群,linux系统zk+Kafka集群搭建

    linux下搭建kafka集群,linux系统zk+Kafka集群搭建Kafka集群搭建与配置准备工作安装java环境搭建zookeeper集群搭建kafka集群1.准备工作1.1安装包1.2准备至少3台主机(ubuntu系统)如果没有物理机,也可以弄3台虚拟机。ubuntu系统不会安装的话可以自己百度哦,这里就不细说了。作者用的是虚拟机,下面是3台电脑的配置主机名IP地址硬件配置kafka-1192.168.1.424CPU、4G内存、128G存储kafka…

  • lldp协议代码阅读_microsoft,lldp协议[通俗易懂]

    lldp协议代码阅读_microsoft,lldp协议[通俗易懂]第1页共17页竭诚为您提供优质文档/双击可除microsoft,lldp协议篇一:lldp协议配置指导lldp协议交换机配置指导802.lab链接层发现协议(linklayerdiscoveryprotocol),将能够使企业网络的故障查找变得更加容易,并加强网络管理工具在多厂商环境中发现和保持精确网络拓扑结构的能力。该协议可望在下月成为一项正式的标准。lldp是一种邻近发现协议。它为以太网网络设…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号