반응 지연 로딩이란 무엇입니까?-프런트엔드 Q&A-php.cn

반응 지연 로딩이란 무엇입니까?

藏色散人

풀어 주다： 2022-12-30 10:49:45

원래의

2550명이 탐색했습니다.

React 지연 로딩은 미리 로드되지 않고 특정 코드, 특정 구성 요소 또는 특정 그림이 사용될 때만 로드된다는 의미입니다. 지연 로딩이 필요한 이유는 너무 많은 콘텐츠가 로드되기 때문입니다. 이로 인해 느린 지연, 느린 응답 및 긴 사용자 대기 시간과 같은 문제가 발생하므로 이를 최적화하기 위해 지연 로딩 메커니즘을 사용할 수 있습니다.

반응 지연 로딩이란 무엇입니까?

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.

반응 지연 로딩이란 무엇입니까?

React 지연 로딩

1. 지연 로딩이란 무엇인가요? 지연 로딩이 필요한 이유는 무엇입니까?

지연 로딩: 미리 로드하지 않고 필요할 때만 특정 코드 조각, 특정 구성 요소 또는 특정 그림을 로드합니다(지연 로딩)

이유: 페이지가 많고 콘텐츠가 풍부하며 페이지가 길다 , 그리고 많은 사진들. 첫 화면에 너무 많은 콘텐츠를 동시에 로딩하면 지연, 느린 응답, 긴 사용자 대기 시간 등의 문제가 발생할 수 있습니다. 우리는 이를 최적화하기 위해 지연 로딩 메커니즘을 자주 사용합니다.

둘째, 지연 로딩을 사용하세요

React.lazy를 사용하여 로딩

//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가 Lazy를 사용한 후에 로딩 공백이 있을 것임을 상기시켜 줍니다. React는 이 공백 동안 어떤 콘텐츠를 표시할지 모르기 때문에 이를 지정해야 합니다. 다음으로 Suspense 로딩 표시기를 사용해야 합니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!