本教程操作环境：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中文网其它相关文章！

推荐内容