react之Lazy和Suspense(懶載入)
阿新 • • 發佈:2021-11-23
React.lazy
React.lazy
函式能讓你像渲染常規元件一樣處理動態引入(的元件)。
什麼意思呢?
其實就是懶載入。
其原理就是利用es6 import()
函式。這個import
不是import命令
。
同樣是引入模組,import命令
是同步引入模組,而import()
函式動態引入。
當 Webpack 解析到該語法時,它會自動地開始進行程式碼分割(Code Splitting),分割成一個檔案,當使用到這個檔案的時候會這段程式碼才會被非同步載入。
為什麼程式碼要分割?
當你的程式越來越大,程式碼量越來越多。
一個頁面上堆積了很多功能,也許有些功能很可能都用不到,但是一樣下載載入到頁面上,所以這裡面肯定有優化空間。
import函式
動態 import()
語法目前只是一個 ECMAScript (JavaScript) 提案, 而不是正式的語法標準。
//import 命令
import { add } from './math';
console.log(add(16, 26));
//import函式
import("./math").then(math => {
console.log(math.add(16, 26));
});
如何使用React.lazy
這是最簡單的React.lazy
,但是這樣頁面會報錯。這個報錯提示我們,在React使用了lazy
之後,會存在一個載入中的空檔期,React不知道在這個空檔期中該顯示什麼內容,所以需要我們指定。接下來就要使用到Suspense
//OtherComponent.js 檔案內容 import React from 'react' const OtherComponent = ()=>{ return ( <div> 我已載入 </div> ) } export default OtherComponent // App.js 檔案內容 import React from 'react'; import './App.css'; //使用React.lazy匯入OtherComponent元件 const OtherComponent = React.lazy(() => import('./OtherComponent')); function App() { return ( <div className="App"> <OtherComponent/> </div> ); } export default App;
Suspense
如果在 App
渲染完成後,包含 OtherComponent
的模組還沒有被載入完成,我們可以使用載入指示器為此元件做優雅降級。這裡我們使用 Suspense
元件來解決。
import React, { Suspense, Component } from 'react';
import './App.css';
//使用React.lazy匯入OtherComponent元件
const OtherComponent = React.lazy(() => import('./OtherComponent'));
export default class App extends Component {
state = {
visible: false
}
render() {
return (
<div className="App">
<button onClick={() => {
this.setState({ visible: true })
}}>
</button>
載入OtherComponent元件
<Suspense fallback={<div>Loading...</div>}>
{
this.state.visible
?
<OtherComponent />
:
null
}
</Suspense>
</div>
)
}
}