react揚帆起航之路由配置與元件分割

react-router v4 發生了巨大改變，由靜態路由開始轉向動態路由，從此，就像使用普通元件一樣來宣告路由。其實，路由從此就是乙個普通元件。

路由的按需載入的實質是**分割,react-router官網有個**拆分的示例，是基於bundle-loader實現的.現在官網的**已經改為基於react-loadable實現。

除此之外，我們還可以通過dynamic import來實現**分割，這裡也是本文使用的方式。

首先，在專案根目錄建立asynccomponent.tsx:

// asynccomponent.tsx

import * as react from 'react';
inte***ce state 
const asynccomponent = (importcomponent: any) => , state> ) ;
}async componentdidmount() = await importcomponent();
this.setstate();
}render() 
} return asynccomponent;
};export default asynccomponent;

import * as react from 'react';

import from 'react-router-dom';

import asynccomponent from './asynccomponent';

import headercomponent from './header';

const asynchome = asynccomponent(() => import('./home/home'));

const asyncnotfound = asynccomponent(() => import('./notfound'));

return (

);};

至此，我們完成了路由的按需載入。

按照上述方法，已經實現了**分割。然而，react-loadable為我們提供了更好的解決方案。react-loadable核心實現原理也是通過dynamic import來實現元件的非同步載入。在此基礎上，它提供了更為強大的功能，如根據延遲時間確定是否顯示loading元件、預載入、支援服務端渲染(關於與服務端渲染的搭配會在後續的文章中提到)等。

import * as react from 'react';

import from 'react-router-dom';

import * as loadable from 'react-loadable';

import headercomponent from './header';

import loadingcomponent from './loading';

inte***ce props

const asynchome = loadable();

const asyncnotfound = loadable();

return (

);};

我們的loading元件如下：

import * as react from 'react';
const loadingcomponent = (props: ) => else if (props.timedout) else if (props.pastdelay) else 
};export default loadingcomponent;

至此，路由配置與元件分割的內容完畢。

react揚帆啟航專欄分享的時我個人學習與實踐react過程中的一些歷程，希望藉此專欄與大家共同**react相關的技術，以求進步。

react揚帆起航之同構（一）

在依靠客戶端渲染時，當使用者開啟頁面時，多數情況下是這樣的 不考慮快取 向靜態資源伺服器獲取html css 向靜態資源伺服器獲取js 向api伺服器獲取資料 開始渲染內容。而在依靠服務端渲染時，傳送http請求後，服務端計算出使用者需要的資料，然後返回帶有內容的html。因此，一般情況下，對於首次...

react路由之路

路由 就是讓不同的路徑來渲染不同的元件，兩種實現方式 1 hashrouter 利用hash實現路由切換 2 browserrouter h5 api 實現路由的切換 複製 a 去a b 去b複製 實現原理 兩大元件 hashrouter 和 route。1 hashrouter 在元件掛載後 co...

機器學習 揚帆起航002 02模型評估與選擇 2

筆記有什麼問題，歡迎大佬指教吶2.2 模型選擇 2.1.1 評估方法 首先什麼是評估方法，你可以簡單理解為我的模型建好了，用什麼資料去評估它。理論來說應該是用未來的資料去評估，但是實際我們是沒有未來資料的，那麼我們就要從總資料中拿出一部分來當做 未來資料 那麼測試集要怎麼劃分出來呢？便有了以下三種方...