React基础入门(虚拟DOM，Diff算法和React路由) --第三篇

虚拟DOM

本质上就是一个JS对象，用来描述你希望在屏幕上看到的内容

Diff算法

执行过程

• 初次渲染时，React会根据初始化的state（model），创建一个虚拟DOM对象（树）
• 根据虚拟DOM生成真正的DOM，渲染到页面
• 当数据变化后(setState())，会重新根据新的数据，创建新的虚拟DOM对象（树）
• 与上一次得到的虚拟DOM对象，使用Diff算法比对（找不同），得到需要更新的内容
• 最终，React只将变化的内容更新（patch）到DOM中，重新渲染到页面

代码演示

• 组件render()调用后，根据状态和JSX结构生成虚拟DOM对象(render()方法的调用并不意味着浏览器进行渲染，render方法调用时意味着Diff算法开始比对了)

• 示例中，只更新p元素的文本节点内容

• 初次渲染的DOM对象
  

• 数据更新之后的虚拟DOM对象
  

总结

• 思路清晰简单为前提，虚拟DOM和Diff保效率（渲染变化的组件）
• 虚拟DOM -> state + JSX
• 虚拟DOM最大的特点是 脱离了浏览器的束缚，也就是意味着只要是能支持js的地方都可以用到react，所以为什么说react是可以进行跨平台的开发

React路由基础

1.React路由介绍

现代的前端应用大多数是SPA（单页应用程序），也就是只有一个HTML页面的应用程序。因为它的用户体验更好、对服务器压力更小，所以更受欢迎。为了有效的使用单个页面来管理多页面的功能，所以出现了路由。

• 路由功能：让用户从一个视图 导航 到另一个视图
• 前端路由是一套映射规则，在React中，是URL路径与组件的对应关系
• 使用React路由简单来说，就是配置路径和组件

2. 路由的基本使用

2.1使用步骤

1. 安装： yarn add react-router-dom

2. 如果没有安装yarn工具的，需要先全局安装一下yarn：npm install -g yarn

3. 导入路由的三个核心组件： Router / Route / Link

   //这里这个as是用Router作为BrowserRouter的别名
   import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
   

• 使用Router 组件包裹整个应用

  render() {
          return (
              <Router>
                  <div>
                      <h1>React中的路由</h1>
                      <Link to="/first">页面一</Link>
                      <Link to="/second">页面二</Link>
                      <Route path="/first" component={First} />
                      <Route path="/second" component={Second} />
                  </div>
              </Router>
          )
      }
  

• 使用Link组件作为导航菜单

  render() {
          return (
              <Router>
                  <div>
                      <h1>React中的路由</h1>
                      <Link to="/first">页面一</Link>
                  </div>
              </Router>
          )
      }
  

• 使用Route组件配置路由路径和要展示的组件

  render() {
          return (
              <Router>
                  <div>
                      <h1>React中的路由</h1>
                      <Link to="/first">页面一</Link>
                      <Route path="/first" component={First} />
                  </div>
              </Router>
          )
      }
  

2.2常用组件说明

• Router组件：包裹整个应用，一个React应用只需要使用一次

  • 两种常用的Router： HashRouter 和 BrowserRouter
  • HashRouter： 使用URL的哈希值实现,这种方式不美观 （localhost:3000/#/first）
  • 推荐 使用BrowserRouter：使用H5的history API实现（localhost3000/first）

• Link组件：用于指定导航链接（a标签）

  • 最终Link会编译成a标签，而to属性会被编译成 a标签的href属性

• Route组件：指定路由展示组件相关信息

  • path属性：路由规则，这里需要跟Link组件里面to属性的值一致
  • component属性：要展示的组件内容
  • Route写在哪，渲染出来的组件就在哪里

2.3编程式导航

• 场景：点击登陆按钮，登陆成功后，通过代码跳转到后台首页，如何实现？

• 编程式导航：通过JS代码来实现页面跳转

• history是React路由提供的，用于获取浏览器历史记录的相关信息

• push(path)：跳转到某个页面，参数path表示要跳转的路径

• go(n)：前进或后退功能，参数n表示前进或后退页面数量

  class Login extends React.Component {
      hdlClick = () => {
          this.props.history.push('/Home')
      }
  
      render(){
          return(
              <Router>
                  <div>
                      <div>登录界面</div>
                      <button onClick={this.hdlClick}>登录</button>
                  </div>
              </Router>
          )
      }
  }
  

2.4默认路由

• 现在的路由都是通过点击导航菜单后展示的，如果进入页面的时候就主动触发路由呢
• 默认路由：表示进入页面时就会匹配到的路由,及组件
• 默认路由：只需要把path设置为 /

2.5匹配模式

2.5.1模糊匹配模式

• 当Link组件的to属性值为 ‘/login’ 时候，为什么默认路由也被匹配成功？
• 默认情况下，React路由是模糊匹配模式
• 模糊匹配规则：只要pathname以path开头就会匹配成功
  

2.5.2精准匹配

• 默认路由认可情况下都会展示，如果避免这种问题？

• 给Route组件添加exact属性，让其变为精准匹配模式

• 精确匹配：只有当path和pathname完全匹配时才会展示改路由

  render() {
          return (
              <Router>
                  <div>
                      <h1>我是APP页面</h1>
                      <Link  to="/">home跳转</Link>--
                      <Link to="/Login">home跳转</Link>
                      {/* exact 精确模式,只会匹配路径名相同的那个组件 */}
                      <Route exact path="/" component={Home}></Route>
                      <Route path="/Login" component={Login}></Route>
                  </div>
              </Router>
  
          )
      }
  

小结

• 路由要通过安装到脚手架中
• Router组件包裹整个应用，只需要使用一次
• Link组件是入口，Route组件是出口
• 通过props.history实现编程式导航
• 默认是模糊匹配，添加exact编程精确匹配
• React路由的一切都是组件