反応遅延読み込みとは何ですか-フロントエンドQ&A-php.cn

反応遅延読み込みとは何ですか

藏色散人

リリース： 2022-12-30 10:49:45

オリジナル

2550 人が閲覧しました

React の遅延読み込みとは、プリロードされず、特定のコード、特定のコンポーネント、または特定の画像が使用された場合にのみ読み込まれることを意味します。遅延読み込みが必要な理由は次のとおりです。最初の画面で同時に読み込みが多すぎると、コンテンツの遅延、応答の遅さ、ユーザーの待ち時間が長くなるなどの問題が発生するため、遅延読み込みメカニズムを使用して最適化できます。

反応遅延読み込みとは何ですか

このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

反応遅延読み込みとは何ですか?

#遅延読み込みに反応する

1. 遅延読み込みとは何ですか?なぜ遅延読み込みが必要なのでしょうか?

遅延読み込み: プリロードは行わず、特定のコード、特定のコンポーネント、または特定の画像を使用する必要がある場合にのみそれらを読み込みます (遅延読み込み)

理由: 多数のコードが存在します。ページ数が多く、内容も豊富で、長いページがあり、写真もたくさんあります。最初の画面に同時に大量のコンテンツを読み込むと、遅延、応答の遅さ、ユーザーの待ち時間が長くなるなどの問題が発生します。これを最適化するために、遅延読み込みメカニズムをよく使用します。

2.遅延読み込みを使用します

React.lazyloadingを使用します

//OtherComponent.js 文件内容
 
import React from &#39;react&#39;
const OtherComponent = ()=>{
  return (
    <div>
      我已加载
    </div>
  )
}
export default OtherComponent
 
// App.js 文件内容
import React from &#39;react&#39;;
import &#39;./App.css&#39;;
 
 
//使用React.lazy导入OtherComponent组件
const OtherComponent = React.lazy(() => import(&#39;./OtherComponent&#39;));
 
 
function App() {
  return (
    <div className="App">
      <OtherComponent/>
    </div>
  );
}
export default App;

ログイン後にコピー

ただし、このページではエラーが報告されます。このエラーメッセージは、React が遅延を使用した後、読み込みギャップが発生することを思い出させます。React は、このギャップの間にどのようなコンテンツを表示するかわからないため、それを指定する必要があります。次に、サスペンス読み込みインジケーターを使用する必要があります。

import React, { Suspense, Component } from &#39;react&#39;;
import &#39;./App.css&#39;;
 
//使用React.lazy导入OtherComponent组件
const OtherComponent = React.lazy(() => import(&#39;./OtherComponent&#39;));
 
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 ビデオチュートリアル」

以上が反応遅延読み込みとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。