Rect路由的使用和虚拟DOM了解(①)

React 路由的使用

1 什么是虚拟dom？

虚拟dom本质上就是一个普通的JS对象，用于描述视图的界面结构

在vue中，每个组件都有一个render函数，每个render函数都会返回一个虚拟dom树，这也就意味着每个组件都对应一棵虚拟DOM树

2 为什么需要虚拟dom？

在vue中，渲染视图会调用render函数，这种渲染不仅发生在组件创建时，同时发生在视图依赖的数据更新时。如果在渲染时，直接使用真实DOM，由于真实DOM的创建、更新、插入等操作会带来大量的性能损耗，从而就会极大的降低渲染效率。****

因此，vue在渲染时，使用虚拟dom来替代真实dom，主要为解决渲染效率的问题。

3 虚拟dom是如何转换为真实dom的？

在一个组件实例首次被渲染时，它先生成虚拟dom树，然后根据虚拟dom树创建真实dom，并把真实dom挂载到页面中合适的位置，此时，每个虚拟dom便会对应一个真实的dom。

如果一个组件受响应式数据变化的影响，需要重新渲染时，它仍然会重新调用render函数，创建出一个新的虚拟dom树，用新树和旧树对比，通过对比，vue会找到最小更新量，然后更新必要的真实dom节点

这样一来，就保证了对真实dom达到最小的改动。

简介

什么是 SPA?

SPA就是单页面应用，整个网站就只有一个Html文件。
　　咱们vue react 就是使用的单页面技术

SPA路由的实现方式有哪些？

目前来说，无论是vue，还是react，spa的路由实现方式无非就是以下两者：

hash方式。 使用location.hash和hashchange事件实现路由。
history api。使用html5的history api实现，主要就是popState事件等。
　　hash用的还是比较多的，但是这种方式的url会比较丑陋，会出现 #； 而history api就可以很好的解决这个问题，但是需要后端配置，并且由于是html5中的api，所以兼容性还不是很好，用的时候需要确定你的用户，再做决定。

安装React路由插件

npm i react-router-dom

再需要的地方引入我们需要的功能

import {Link, NavLink} from "react-router";

大家可以去印象中文里查看react 路由的中文文档


对了React一共有三种路由共选择,
① WEB 专门为前端人员使用的
② NATIVE 是REACT-NATIVE开发使用的路由
3 ANYWHRE 以上俩这都可以使用

react-router-dom相关API

内置组件
1 BrowserRouter
url导航来不会有#

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter} from 'react-router-dom'
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

用BrowserRouter组件包裹住App组件是为了APP里面的所以route,lin等能够正常使用都在一个路由管控下

2.HashRouter
hash模式下url会出现#

3.Route

• path: 所要监听的路由
• component: 该路由要绑定的组件
• exact: 可选，不写时为 false，是否选择严格匹配

当当前路由对应上了路由组件所绑定的路由时，则会展示所绑定的组件。
注册路由的组件
只要用Route组件注册了的组件才能被成为路由组件,其它没有注册的都是普通组件

  					 <Route path="/about" component={About}></Route>
                    <Route path="/home" component={Home}></Route>

4.Redirect
打开指定页面展示默认展示我们想展示的路由

5.Link
6.NavLink

用于帮助我们跳转到对应的路由
改变url路由地址的
7.Switch
让路由匹配成功就停止匹配,不然后面再有path相同的路由对应的组件还会push到页面

模糊匹配和严格匹配，都是指当前的组件对当前路由的匹配模式：

• 模糊匹配

  如果当前路由与匹配的路由成相等或包含（注意层级）的情况，则启用该组件

  • http://localhost:3000/home/a/b/c 则为包含路由 /home
  • http://localhost:3000/a/b/home/c 则为不包含路由 /home（层级不对）

• 严格匹配

  如果当前路由与匹配的路由相等的话，才启用该组件

  • http://localhost:3000/home 则为与路由 /home 相等
  • http://localhost:3000/home/a 则为与路由 /home 不相等

  • 3.嵌套路由

假设我们有个路由组件为 Home，在根组件中使用 Link跳转到了该路由，当前路由为 /home，可在组件 Home 中还有两个 Link，分别导向路由 /home/message 与 /home/news 然后在组件中还有其他的路由组件。这就时嵌套路由的使用。
如下面的代码：

class Home extends Component{
    render(){
        return (
            <div>
                <Link to="/home/message">Message</Link>
                <Link to="/home/news">News</Link>
                <hr/>
                <Route path="/home/message" component={Message} />
                <Route path ="/home/news" component={News} />
            </div>
        )
    }
}

总结:

路由其实就是帮助我们再不刷新页面的情况下实现页面的跳转效果,而且初始化页面也非常块,可以更好的与用户做出交互.非常方便好用.超攒.
今天就学习了这么多,下期更精彩.关注不迷路.