探究React-Router的本质

cgspine 发布于2019-08-23 18:30 / 2522人阅读

摘要：我认为应该弹窗的。我这样的假设是什么观察结果现象点击页面上的标签承载的数据时，并没有执行函数。研究原先假设浏览器界面的更改，必定导致虚拟重新建立，必然导致更新，更新，就会更新。

此文章，缘起，点击路由标签时，发现在渲染之前的组件，打印日志没有出来，但组件以及渲染了。

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

function ParamsExample() {
  alert("c")
  return (
    
      
        Accounts
        
          
            Netflix
          
          
            Zillow Group
          
          
            Yahoo
          
          
            Modus Create
          
        

        
        
        {/*
           It"s possible to use regular expressions to control what param values should be matched.
              * "/order/asc"  - matched
              * "/order/desc" - matched
              * "/order/foo"  - not matched
        */}
      
    
  );
}

function Child({ match }) {
  return (
    
      ID: {match.params.id}
    
  );
}

function ComponentWithRegex({ match }) {
  return (
    
      Only asc/desc are allowed: {match.params.direction}
    
  );
}

export default ParamsExample;

我认为应该弹窗的。每次点击路由应该重新刷新一遍，结果不是。
我这样的假设是什么？

观察结果（现象）

点击页面上的标签承载的数据时，并没有执行alert函数。ParamsExample组件没有刷新。

研究原先假设

浏览器界面的更改，必定导致虚拟DOM重新建立，必然导致DOM更新，DOM更新，HMTL就会更新。

反思校正假设

云服务器 GPU云服务器关于webrtc直播的探究云计算的本质 CDN的本质机器学习的本质

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105338.html

React技术栈实现XXX点评App demo

摘要：项目的架构也是最近在各种探讨研究。还求大神多指点项目技术总结技术栈项目结构探究初体验关于项目中的配置说明项目简单说明开发这一套，我个人的理解是体现的是代码分层职责分离的编程思想逻辑与视图严格区分。前端依旧使用技术栈完成。项目地址：https://github.com/Nealyang/R...技术栈：react、react-router4.x 、 react-redux 、 webp...

wslongchen 2019-08-21 16:24 评论0 收藏0
React结合TypeScript和Mobx初体验

摘要：结合编辑器可以推导变量对应的类型以及内部的结构，提高代码的健壮性和可维护性。通过充分利用时间回溯的特征，可以增强业务的可预测性与错误定位能力。对于对象的哪部分需要成为可观察的，提供了细粒度的控制。 showImg(https://segmentfault.com/img/bVba6Ts?w=1218&h=525); 为什么要使用TypeScript 侦测错误通过静态类型检测可以尽早检...

dreambei 2019-08-22 17:29 评论0 收藏0
FEDAY2016之旅

摘要：前戏补上参会的完整记录，这个问题从一开始我就是准备自问自答的，希望可以通过这种形式把大会的干货分享给更多人。 showImg(http://7xqy7v.com1.z0.glb.clouddn.com/colorful/blog/feday2.png); 前戏 2016/3/21 补上参会的完整记录，这个问题从一开始我就是准备自问自答的，希望可以通过这种形式把大会的干货分享给更多人。 ...

red_bricks 2019-08-19 17:55 评论0 收藏0
react路由浅析

摘要：浏览器端使用的和集成使用时会用到中路由分类基于提供的和事件来保持和的同步。路由剖析在上面的示例中是转发的枢纽在这个中转站有很多线路通过开关可以启动列车的运行乘坐列车就可以发现新大陆。引言在使用react做复杂的spa开发中,开发中必不可少的就是react-router,它使用Lerna管理多个仓库, 在browser端常使用的几个如下所示 react-router 提供了路由的...

jackzou 2019-08-22 16:12 评论0 收藏0
从路由原理出发，深入阅读理解react-router 4.0的源码

摘要：通过前端路由可以实现单页应用本文首先从前端路由的原理出发，详细介绍了前端路由原理的变迁。接着从的源码出发，深入理解是如何实现前端路由的。执行上述的赋值后，页面的发生改变。 react-router等前端路由的原理大致相同，可以实现无刷新的条件下切换显示不同的页面。路由的本质就是页面的URL发生改变时，页面的显示结果可以根据URL的变化而变化，但是页面不会刷新。通过前端路由可以实现...

Miyang 2019-08-23 12:01 评论0 收藏0