react-router是伴隨著react框架出現(xiàn)的路由系統(tǒng)，它也是公認(rèn)的一種優(yōu)秀的路由解決方案。在使用react-router時候，我們常常會使用其自帶的路徑跳轉(zhuǎn)組件Link,通過<Link  to="path"></Link>實現(xiàn)跳轉(zhuǎn)，這和傳統(tǒng)的<a href="path"></a>何其相似！但它們到底有什么具體的區(qū)別呢？

對比<a>,Link組件避免了不必要的重渲染

A  -- 通過<a>標(biāo)簽實現(xiàn)頁面跳轉(zhuǎn)：（圖中的例子將會在下面詳細(xì)解答）

 

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)-->Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)-->Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

 

B --通過<Link>組件實現(xiàn)頁面跳轉(zhuǎn)：

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)  ------>Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

react-router：只更新變化的部分從而減少DOM性能消耗

react的創(chuàng)新之處在于，它利用虛擬DOM的概念和diff算法實現(xiàn)了對頁面的"按需更新"，react-router很好地繼承了這一點，譬如上圖所示，導(dǎo)航組件和三個Tab組件（通過...,通過...,通過...）的重渲染是我們不希望看到的，因為無論跳轉(zhuǎn)到頁面一或是頁面二，它只需要渲染一次就夠了。<Link>組件幫助我們實現(xiàn)了這個愿望，反觀<a>標(biāo)簽，每次跳轉(zhuǎn)都重渲染了導(dǎo)航組件和Tab組件試想一下，在一個浩大的項目里，這多么可怕！我們的"渲染"做了許多"無用功"，而且消耗了大量彌足珍貴的DOM性能！

react-router的使用

1用npm安裝依賴：通過終端進入項目目錄里，寫入npm install react-router安裝react-router;

2從react-router的