探究React-Router的本質(zhì)

cgspine 發(fā)布于2019-08-23 18:30 / 2529人閱讀

摘要：我認(rèn)為應(yīng)該彈窗的。我這樣的假設(shè)是什么觀察結(jié)果現(xiàn)象點(diǎn)擊頁(yè)面上的標(biāo)簽承載的數(shù)據(jù)時(shí)，并沒(méi)有執(zhí)行函數(shù)。研究原先假設(shè)瀏覽器界面的更改，必定導(dǎo)致虛擬重新建立，必然導(dǎo)致更新，更新，就會(huì)更新。

此文章，緣起，點(diǎn)擊路由標(biāo)簽時(shí)，發(fā)現(xiàn)在渲染之前的組件，打印日志沒(méi)有出來(lái)，但組件以及渲染了。

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;

我認(rèn)為應(yīng)該彈窗的。每次點(diǎn)擊路由應(yīng)該重新刷新一遍，結(jié)果不是。
我這樣的假設(shè)是什么？

觀察結(jié)果（現(xiàn)象）

點(diǎn)擊頁(yè)面上的標(biāo)簽承載的數(shù)據(jù)時(shí)，并沒(méi)有執(zhí)行alert函數(shù)。ParamsExample組件沒(méi)有刷新。

研究原先假設(shè)

瀏覽器界面的更改，必定導(dǎo)致虛擬DOM重新建立，必然導(dǎo)致DOM更新，DOM更新，HMTL就會(huì)更新。

反思校正假設(shè)

GPU云服務(wù)器云服務(wù)器關(guān)于webrtc直播的探究云計(jì)算的本質(zhì) CDN的本質(zhì) 機(jī)器學(xué)習(xí)的本質(zhì)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/105338.html

相關(guān)文章

React技術(shù)棧實(shí)現(xiàn)XXX點(diǎn)評(píng)App demo

摘要：項(xiàng)目的架構(gòu)也是最近在各種探討研究。還求大神多指點(diǎn)項(xiàng)目技術(shù)總結(jié)技術(shù)棧項(xiàng)目結(jié)構(gòu)探究初體驗(yàn)關(guān)于項(xiàng)目中的配置說(shuō)明項(xiàng)目簡(jiǎn)單說(shuō)明開(kāi)發(fā)這一套，我個(gè)人的理解是體現(xiàn)的是代碼分層職責(zé)分離的編程思想邏輯與視圖嚴(yán)格區(qū)分。前端依舊使用技術(shù)棧完成。項(xiàng)目地址：https://github.com/Nealyang/R...技術(shù)棧：react、react-router4.x 、 react-redux 、 webp...

wslongchen 2019-08-21 16:24 評(píng)論0 收藏0
React結(jié)合TypeScript和Mobx初體驗(yàn)

摘要：結(jié)合編輯器可以推導(dǎo)變量對(duì)應(yīng)的類型以及內(nèi)部的結(jié)構(gòu)，提高代碼的健壯性和可維護(hù)性。通過(guò)充分利用時(shí)間回溯的特征，可以增強(qiáng)業(yè)務(wù)的可預(yù)測(cè)性與錯(cuò)誤定位能力。對(duì)于對(duì)象的哪部分需要成為可觀察的，提供了細(xì)粒度的控制。 showImg(https://segmentfault.com/img/bVba6Ts?w=1218&h=525); 為什么要使用TypeScript 偵測(cè)錯(cuò)誤通過(guò)靜態(tài)類型檢測(cè)可以盡早檢...

dreambei 2019-08-22 17:29 評(píng)論0 收藏0
FEDAY2016之旅

摘要：前戲補(bǔ)上參會(huì)的完整記錄，這個(gè)問(wèn)題從一開(kāi)始我就是準(zhǔn)備自問(wèn)自答的，希望可以通過(guò)這種形式把大會(huì)的干貨分享給更多人。 showImg(http://7xqy7v.com1.z0.glb.clouddn.com/colorful/blog/feday2.png); 前戲 2016/3/21 補(bǔ)上參會(huì)的完整記錄，這個(gè)問(wèn)題從一開(kāi)始我就是準(zhǔn)備自問(wèn)自答的，希望可以通過(guò)這種形式把大會(huì)的干貨分享給更多人。 ...

red_bricks 2019-08-19 17:55 評(píng)論0 收藏0
react路由淺析

摘要：瀏覽器端使用的和集成使用時(shí)會(huì)用到中路由分類基于提供的和事件來(lái)保持和的同步。路由剖析在上面的示例中是轉(zhuǎn)發(fā)的樞紐在這個(gè)中轉(zhuǎn)站有很多線路通過(guò)開(kāi)關(guān)可以啟動(dòng)列車的運(yùn)行乘坐列車就可以發(fā)現(xiàn)新大陸。引言在使用react做復(fù)雜的spa開(kāi)發(fā)中,開(kāi)發(fā)中必不可少的就是react-router,它使用Lerna管理多個(gè)倉(cāng)庫(kù), 在browser端常使用的幾個(gè)如下所示 react-router 提供了路由的...

jackzou 2019-08-22 16:12 評(píng)論0 收藏0
從路由原理出發(fā)，深入閱讀理解react-router 4.0的源碼

摘要：通過(guò)前端路由可以實(shí)現(xiàn)單頁(yè)應(yīng)用本文首先從前端路由的原理出發(fā)，詳細(xì)介紹了前端路由原理的變遷。接著從的源碼出發(fā)，深入理解是如何實(shí)現(xiàn)前端路由的。執(zhí)行上述的賦值后，頁(yè)面的發(fā)生改變。 ??react-router等前端路由的原理大致相同，可以實(shí)現(xiàn)無(wú)刷新的條件下切換顯示不同的頁(yè)面。路由的本質(zhì)就是頁(yè)面的URL發(fā)生改變時(shí)，頁(yè)面的顯示結(jié)果可以根據(jù)URL的變化而變化，但是頁(yè)面不會(huì)刷新。通過(guò)前端路由可以實(shí)現(xiàn)...

Miyang 2019-08-23 12:01 評(píng)論0 收藏0