在webpack中, 呼叫import()函式可以將依賴模組進行切割, 打包為非入口點檔案, 這是通過promise+ajax完成的. 請求路徑是相對路徑, 對於單頁應用來說沒有問題.
非入口點檔案的命名由webpack.config.output.chunkfilename(可以定義路徑, 使用[name]和[id]變數)以及magic comment(定義[name]變數)共同確定.
react.lazy() 允許你定義乙個動態載入的元件。這有助於縮減 bundle 的體積，並延遲載入在初次渲染時未用到的元件。
// 這個元件是動態載入的
const somecomponent = react.lazy(() => import('./somecomponent'));
使用 react.lazy 的動態引入特性需要 js 環境支援 promise。在 ie11 及以下版本的瀏覽器中需要通過引入 polyfill 來使用該特性。
! 不支援服務端渲染。
import from 'react';
import css from './style.css';
/** 非同步元件使用lazy()函式載入, 傳遞乙個使用import()函式的promise非同步方法, 該方法最終返回import()函式的結果 */
const asynccomponent = lazy(() => , 5000);
});});
});export default (
);
**分割:
suspense:
suspense還用於非同步資料的獲取:
官方示例:
在執行非同步操作的過程中, 我們只需要在promise未完成狀態時將該promise丟擲到react核心即可:
promise的拒絕狀態會導致元件立即重新渲染, 並可能不斷重複:
丟擲其它非promise異常會被react重新丟擲, 導致頁面報錯.
如果乙個丟擲的promise結束了成為success狀態, 那麼它之後應該返回相應的結果, 而不是再次丟擲promise, 因為success狀態的promise(這裡可能是全部的promise結束後再呼叫)會導致方法元件再次被呼叫以渲染元素.
import from 'react';
import css from './style.css';
// 單例
let fetchnamebyinternet = () => new promise(resolve => );
let resolved = false; // 標誌網路請求是否已完成
let name = "don't get the name"; // 儲存從網路獲取的使用者名稱
react 動態修改路由 react 動態載入路由
前言react router4 不再推薦將所有路由規則放在同乙個地方集中式路由，子路由應該由父元件動態配置，元件在 匹配就在 渲染，更加靈活 引入必要的依賴import react from react import from react router 接下來建立乙個component函式 目的就是...
React 7 React高階元件
高階元件的概念及應用 以陣列為子元件的模式 乙個高階元件就是乙個函式，這個函式接受乙個元件作為輸入，然後返回乙個新的元件作為結果，而且，返回的新元件擁有了陣列元件所不具有的功能 定義高階元件的意義 重用 把公用邏輯提取出來，利用高階元件的方式應用出去 修改現有 react 元件的行為。告誡元件的實現...
react之元件非同步載入
我們在用react的時候，希望元件非同步載入，提高效能，那麼應該怎麼實現呢？往下看。react非同步載入的方法很多，這裡只說一種，因為這一種直接使用react的特性就可以了，不需要另外配置webpack，就是用乙個小技巧去import元件，所以方便，實現簡單。寫乙個元件a，這個元件內部會載入另外的元...