极品-React中的DOM虚拟DOM,与deff算法,router

在react中state中存放的是数据
初次渲染时react会根据state(model),创建出一个虚拟DOM树
然后经过render将虚拟DOM形成出真实的DOM
当数据发生变化的时候(setState())他会生成一个新的虚拟DOM树
通过deff算法计算上一次的值和新更新的值有什么新的变化
最后render只会将更新的内容渲染到真实DOM上

安装
安装react-router-dom
yarn add react-router-dom --save
代码中基本使用

import React,{ Component } from "react";
import { BrowserRouter,Route,Switch } from "react-router-dom";
import routers from "./router/index";
class App extends Component<any,any>{render(): React.ReactNode {return (<BrowserRouter>{routers.map(router=>{return (<Routepath={router.path}component = { router.component }></Route>)})}</BrowserRouter>)}
}
export default App

        1.写法不同：

           一般组件：<Demo/>           路由组件：<Route path="/demo" component={Demo}/>

2.存放位置不同：

    一般组件：components     路由组件：pages

3.接收到的props不同：

一般组件：写组件标签时传递了什么，就能收到什么

路由组件：接收到三个固定的属性


      history:           go: ƒ go(n)             goBack: ƒ goBack()               goForward: ƒ goForward()                  push: ƒ push(path, state)                             replace: ƒ replace(path, state)
location:pathname: "/about"             search: ""                  state: undefined match: params: {}path: "/about"url: "/about"

路由传参接受
方式1
通过params

<Route path='/:userId' component={User}></Route>

跳转路由

this.props.history.push('/1234')

接收

this.props.match.params.userId

特点：刷新页面数据不会丢失，但是只能传字符串

方式2 通过query

跳转路由

 this.props.history.push({ pathname: '/home' , query : { id: '6666' }})

接收参数

this.props.location.query.id

方式3 通过state
跳转路由

 this.props.history.push({ pathname: '/home' , state: { id: '6666' }})

接收参数

this.props.location.state.id

通过params传参页面刷新数据不会丢失 query与state传参刷新页面数据会丢失

嵌套路由

先定义页面
Topic.js, About.js, Topic.js, A.js, B.js (将里面的文字做相应的替换)

import React from 'react'export default class Topic extends React.Component {render() {return (<><div>Topic页面</div></>)}
}

Home2.js

import React from 'react'
import { Link } from 'react-router-dom'export default class Home extends React.Component {render() {return (<div><ul><li><Link to="/">Home2</Link></li><li><Link to="/about">About2</Link></li><li><Link to="/topic">Topics2</Link></li></ul><hr/>{/* 子页面 */}{/* 所有子组件 */}{this.props.children}</div>)}
}

router.js

import React from 'react'
import { HashRouter as Router, Route, Link, Switch, useRouteMatch, useParams } from 'react-router-dom'import Main from './Main'
import About from './About'
import Topic from './Topic'import Home from './Home'
import A from './A'
import B from './B'/*** 这个页面就是 最终输出页面* 在项目根目录的 index.js 文件里面* * import Router from './pages/router_demo/router02/router';* ReactDOM.render(<Router />, document.getElementById('root'));*/
export default class IRouter extends React.Component {render() {return (<><Router>{/* 只能有一个根节点 */}<Home>{/* 页面路由,一个 Route 代表一个页面 */}{/* 4.0  版本开始允许加载多个路由，所以建议加上 exact 进行精准匹配*/}<Route exact={true} path="/" component={Main}/><Route exact={true} path="/about" component={About}/><Route exact={true} path="/topic" component={Topic}/>{/* 嵌套路由，不能在父级家 exact，因为先要匹配父级然后才能匹配子集 */}{/* 比如：/nested/a ， 会先匹配父级 /nested 饭后才能匹配 /nested/a */}<Route path="/nested" component={() => <Nested />} /></Home></Router></>)}
}/*** 函数组件* @param {*} props */
export function Nested(props) {// 获取route的匹配数据// path 路径， url 路径, params 参数const { path, url, params } = useRouteMatch()// 获取 path 参数, http://localhost:3000/a/:number// const { number } = useParams()console.log(path, url, params)return (<><ul><li><Link to={`${path}/a`}>A页面</Link></li><li><Link to={`${path}/b`}>B页面</Link></li></ul><hr/>{/* {props.children} */}<Switch><Route exact path={path} component={() => <h3>嵌套路由</h3>}/><Route  path={`${path}/a`} component={A}/><Route  path={`${path}/b`} component={B}/></Switch></>)
}

嵌套路由的重点在于，嵌套路由，不能在父级加 exact(精准匹配)，因为先要匹配父级然后才能匹配子集
比如：/nested/a ，会先匹配父级 /nested 后才能匹配 /nested/a

<Route path="/nested" component={() => <Nested />} />
.......  分隔符 ...........// <Nested /> 组件的内部
// 这里的 path 就是 /nested
// `${path}/a` 就是 /nested/a
<Switch><Route exact path={path} component={() => <h3>嵌套路由</h3>}/><Route  path={`${path}/a`} component={A}/><Route  path={`${path}/b`} component={B}/>
</Switch>

极品-React中的DOM虚拟DOM,与deff算法,router相关推荐

[react] React中怎么操作虚拟DOM的Class属性
[react] React中怎么操作虚拟DOM的Class属性 render() { this.debug('render ....'); this.components.push(<Atten ...
【React深入】深入分析虚拟DOM的渲染原理和特性
导读 React的虚拟DOM和Diff算法是React的非常重要的核心特性,这部分源码也非常复杂,理解这部分知识的原理对更深入的掌握React是非常必要的. 本来想将虚拟DOM和Diff算法放到一篇文 ...
深刻理解 React (一) ——JSX和虚拟DOM
版权声明:本文由左明原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/155 来源:腾云阁 https://www.qclo ...
React：真正理解虚拟DOM
在mvvm这个框架领域,到现在仍然存在一个及其热门的面试问题:为什么要使用虚拟DOM? 一般的回答如下: 本文将通过另一个视角,给出不同的答案,本文不局限于点对点看待问题本硕本身,而是放在一个足够长的 ...
Vue进阶之Virtual DOM(虚拟DOM) 实现原理
Vue进阶之Virtual DOM(虚拟DOM) 实现原理 Virtual DOM(虚拟 DOM),是由普通的 JS 对象来描述 DOM 对象,因为不是真实的 DOM 对象,所以叫 Virtual D ...
javascript --- 将DOM结构转换成虚拟DOM 虚拟DOM转换成真实的DOM结构
虚拟DOM的实现使用虚拟DOM的原因: 减少回流与重绘将DOM结构转换成对象保存到内存中 <img /> => { tag: 'img'} 文本节点 => { tag: u ...
Vue 源码学习—Virtual DOM(虚拟 DOM)
Virtual DOM Virtual DOM是什么真实DOM成员引入原因作用 Virtual DOM是什么定义: 普通的js对象来描述DOM对象,不是真实的DOM,顾名思义,称为虚拟DOM ...
React开发（211）:react中refs转发到dom组件
React 中同构（SSR）原理脉络梳理
随着越来越多新型前端框架的推出,SSR 这个概念在前端开发领域的流行度越来越高,也有越来越多的项目采用这种技术方案进行了实现.SSR 产生的背景是什么?适用的场景是什么?实现的原理又是什么?希望大家在 ...
歌谣学前端之React中虚拟dom
前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19 叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的 ...

极品-React中的DOM虚拟DOM,与deff算法,router

极品-React中的DOM虚拟DOM,与deff算法,router相关推荐

最新文章

热门文章