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)


相关推荐

  • 20212.3 idea 激活码(最新序列号破解)

    20212.3 idea 激活码(最新序列号破解),https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • navicat15.0.17万能激活码【在线注册码/序列号/破解码】

    navicat15.0.17万能激活码【在线注册码/序列号/破解码】,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • nfs方式启动rootfs配置过程[通俗易懂]

    nfs方式启动rootfs配置过程[通俗易懂]这里使用nfs主要是做rootfs挂载。开发板中运行kernel做nfs客户端,宿主机中运行nfs服务。在宿主机的nfs服务器中导出文件夹形式的rootfs目录,在客户端中去挂载这个文件夹形式的rootfs进而去启动系统。

  • 10分钟就能学会,Linux操作系统21个shell常用命令

    10分钟就能学会,Linux操作系统21个shell常用命令目录一、shell的基本形式1.shell的种类:sh、bash、csh、tcsh、ash等。(1).shshell(2).cshshell(3).tcshshell(4).ashshell(5).bashshell2.shell命令的基本格式3.注意1.Linux严格区分大小写,aA不同2.使用分号(;)一行中输入多个命令。3.按下Table键,自动补齐命令、目录或文

    2022年10月17日
  • EVE-NG模拟器升级并添加H3C设备

    EVE-NG模拟器升级并添加H3C设备EVE-NG模拟器升级并添加H3C系列模板和镜像欢迎使用Markdown编辑器你好!这是你第一次使用Markdown编辑器所展示的欢迎页。如果你想学习如何使用Markdown编辑器,可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它…

  • linux如何卸载jdk版本并重装_centos卸载jdk

    linux如何卸载jdk版本并重装_centos卸载jdklinuxcentos7自带了openjdk,这个版本的jdk是缺少一部分功能的,最好重新安装oraclejdk。但在没有卸载openjdk就安装oraclejdk时,部分依赖包装不上,后期程序运行时会出现问题。以下为卸载jdk的步骤(openjdk或oraclejdk)和安装步骤。#1.查看目前系统中包含的jdk版本rpm-qa|grepjdk#2.得到的结果如下:java-1.8.0-openjdk-1.8.0.322.b06-1.e

发表回复

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

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