<dd id="3pk9i"><optgroup id="3pk9i"><video id="3pk9i"></video></optgroup></dd>
<rp id="3pk9i"></rp>

<dd id="3pk9i"><track id="3pk9i"></track></dd>
      1. <th id="3pk9i"></th>
        1. <ol id="3pk9i"><ruby id="3pk9i"></ruby></ol>

        2. 什么是react懶加載-觀察

          來源:php中文網 | 2022-12-30 11:00:21 |

          本教程操作環境:Windows10系統、react18.0.0版、Dell G3電腦。

          什么是react懶加載?


          (資料圖)

          React懶加載

          一、懶加載是什么?為什么需要懶加載?

          懶加載:不會預加載,而是需要使用某段代碼,某個組件或者某張圖片時,才加載他們(延遲加載)

          原因:頁面多,內容豐富,頁面長,圖片多。在首屏同時加載過多的內容,會導致卡頓不流暢響應速度慢、用戶等待時間過長等問題。對此我們常用懶加載機制來進行優化。

          二、使用懶加載

          使用React.lazy加載

          //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;

          但是這樣頁面會報錯。這個報錯提示我們,在React使用了lazy之后,會存在一個加載中的空檔期,React不知道在這個空檔期中該顯示什么內容,所以需要我們指定。接下來就要使用到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>    )  }}

          推薦學習:《react視頻教程》

          以上就是什么是react懶加載的詳細內容,更多請關注php中文網其它相關文章!

          關鍵詞: React

          中文字幕在线观看2021
          <dd id="3pk9i"><optgroup id="3pk9i"><video id="3pk9i"></video></optgroup></dd>
          <rp id="3pk9i"></rp>

          <dd id="3pk9i"><track id="3pk9i"></track></dd>
            1. <th id="3pk9i"></th>
              1. <ol id="3pk9i"><ruby id="3pk9i"></ruby></ol>