本文為我對react總router底層原理結合參考資料的分析:
1.路由是什麼
個人理解:路由是訪問各個元件的**器;
路由的分類：路由分為一級路由和巢狀路由了;
路由的實現原理:
由ui = reducr(stateorproperty);可知，路由的底層原理還是狀態或者屬性改變驅動的；
可以理解為路由有乙個location屬性，通過瀏覽器可以改變router的屬性值，從而驅動屬性進行渲染:
3.使用路由進行頁面跳轉會導致渲染效率的降低麼?
答案是不會的，當通過巢狀路由首次訪問巢狀的元件的時候，被巢狀的子元件的父級元件也會進行載入渲染，此時父子元件的生命週期函式將被執行，但是首次訪問但並未離開當前頁面【頂級路由路徑未改變的時候】，訪問巢狀的其他元件的時候，會根據訪問的路徑載入指定的元件，此只會載入路徑中體現變更部分的元件。
如下圖所示:
1.首次訪問的時候，路徑匹配的元件的生命週期函式都將被執行[注意訪問的路徑是巢狀路由的路徑]:
2.再次訪問的時候，只會載入呼叫匹配路徑中發生改變的部分的元件的生命週期函式:
3.（1.0）路由實際是乙個元件，其中巢狀了所有的希望訪問的可以訪問的元件；
（2.0）通過路由訪問的知識路徑匹配的元件;
(3.0)當存在頁面內無重新整理內容變換的時候建議使用巢狀路由
4.路由使用的小案例:
root.js
import react from 'react';
import reactdom from 'react-dom';
import index from './index';
import componentlist from './components/list';
import componentdetails from './components/details';
import componentdetails2 from './components/details2';
import from 'react-router';
export default
class
root
extends
react.component;
}reactdom.render(, document.getelementbyid('example'));
var react = require('react');
var reactdom = require('react-dom');
import componentheader from './components/header';
import componentfooter from './components/footer';
import bodyindex from './components/bodyindex';
import
'antd/dist/antd.css';
export default
class
index
extends
react.component
componentwillmount()
componentdidmount()
render()
else
*/return (
999} username=/>);}
}
import react from 'react';
export default
class
componentdetails
extends
react.component
componentwillmount()
render();
}
import react from 'react';
export default
class
componentdetails
extends
react.component
componentwillmount()
render();
}
React中setState修改深層物件
在react中經常會使用到setstate,因為在react生態中,state就是一切.在開發過程中,時長會在state中遇到一些比較複雜的資料結構,類似下面這樣的 state objb objc objd d 這時需要我們修改list中obja中的name屬性和objd的屬性,遇到這樣的情況我們一...
React中setState如何修改深層物件？
在react中經常會使用到setstate,因為在react生態中,state就是一切.在開發過程中,時長會在state中遇到一些比較複雜的資料結構,類似下面這樣的 這時需要我們修改list中obja中的name屬性和objd的屬性,遇到這樣的情況我們一般會使用什麼辦法解決呢?其實有三種解決方案 方...
深層理解 棧平衡原理
深層理解 棧平衡原理 底層是如何實現棧平衡的？在ios android作業系統中，經常會遇到入棧出棧的操作。那麼現在作業系統已經不需要我們去關心堆疊的操作。比如 ios中的arc模式，android中的jvm都會幫我們自動釋放記憶體，自動保持堆疊平衡。但是對於開發者來說，還是很有必要掌握堆疊平衡原理...