react lazyLoad加載使用詳解

更新時(shí)間：2023年03月03日 09:45:56 作者：?QSω[*邱╭

lazy是React提供的懶（動(dòng)態(tài)）加載組件的方法，React.lazy()，路由組件代碼會(huì)被分開打包，能減少打包體積、延遲加載首屏不需要渲染的組件，依賴內(nèi)置組件Suspense標(biāo)簽的fallback屬性，給lazy加上loading指示器組件，Suspense目前只和lazy配合實(shí)現(xiàn)組件等待加載指示器的功能

1.lazyLoad用處

默認(rèn)例如首頁，如果有好十幾個(gè)甚至百個(gè)路由，react是會(huì)默認(rèn)一下全部把路由組件一下全部加載的，極可能造成頁面卡頓。react lazyLoad就可以解決這個(gè)問題。

2.使用

我用的react版本是18,注意在主index.js中<React.StrictMode>要去掉，不然會(huì)出現(xiàn)路由變化了，控制臺(tái)也不報(bào)錯(cuò)但是頁面不跳轉(zhuǎn)的問題.

2.1 react-router-dom5版本寫法

import React, { Component,lazy,Suspense} from 'react'
import {NavLink,Route} from 'react-router-dom'
import Loading from './Loading'
const Home = lazy(()=> import('./Home') )
const About = lazy(()=> import('./About'))
export default class Demo extends Component {
	render() {
		return (
			<div>
				<div className="row">
					<div className="col-xs-offset-2 col-xs-8">
						<div className="page-header"><h2>React Router Demo</h2></div>
					</div>
				</div>
				<div className="row">
					<div className="col-xs-2 col-xs-offset-2">
						<div className="list-group">
							{/* 在React中靠路由鏈接實(shí)現(xiàn)切換組件--編寫路由鏈接 */}
							<NavLink className="list-group-item" to="/about">About</NavLink>
							<NavLink className="list-group-item" to="/home">Home</NavLink>
						</div>
					</div>
					<div className="col-xs-6">
						<div className="panel">
							<div className="panel-body">
								 {/* fallback可以寫一個(gè)組件,但是這個(gè)組件就不能懶加載了，本來的作用就是如果網(wǎng)絡(luò)等原因?qū)е马撁婵瞻椎脑捑陀媒M件來替代 */}
								<Suspense fallback={<Loading/>}>
									{/* 注冊路由 */}
									<Route path="/about" component={About}/>
									<Route path="/home" component={Home}/>
								</Suspense>
							</div>
						</div>
					</div>
				</div>
			</div>
		)
	}
}

2.2 react-router-dom6版本寫法

主要是引入和Suspense的改變

import React, { Component, lazy, Suspense } from "react";
import { NavLink, Route,Routes } from "react-router-dom";
import Loading from "./Loading";
const Home = lazy(() => import("./Home"));
const About = lazy(() => import("./About"));
export default class Demo extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <div className="page-header">
              <h2>React Router Demo</h2>
            </div>
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              {/* 在React中靠路由鏈接實(shí)現(xiàn)切換組件--編寫路由鏈接 */}
              <NavLink className="list-group-item" to="/about">
                About
              </NavLink>
              <NavLink className="list-group-item" to="/home">
                Home
              </NavLink>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                {/* fallback可以寫一個(gè)組件,但是這個(gè)組件就不能懶加載了，本來的作用就是如果網(wǎng)絡(luò)等原因?qū)е马撁婵瞻椎脑捑陀媒M件來替代 */}
                <Suspense fallback={<Loading />}>
                  {/* 注冊路由 */}
                  <Routes>
                    <Route path="/about" element={<About/>} />
                    <Route path="/home" element={<Home/>} />
                  </Routes>
                </Suspense>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

需要注意的是，lazyLoad只有在第一次請求那個(gè)路由組件才會(huì)去調(diào)用資源請求，第二次就不會(huì)再去調(diào)用的了，有緩存。

到此這篇關(guān)于react lazyLoad加載使用詳解的文章就介紹到這了,更多相關(guān)react lazyLoad內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: