react?lazyLoad加載如何使用

本篇內(nèi)容介紹了“react lazyLoad加載如何使用”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

1.lazyLoad用處

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

2.使用

我用的react版本是18,注意在主index.js中<React.StrictMode>要去掉，不然會出現(xiàn)路由變化了，控制臺也不報錯但是頁面不跳轉(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"><h3>React Router Demo</h3></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可以寫一個組件,但是這個組件就不能懶加載了，本來的作用就是如果網(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">
              <h3>React Router Demo</h3>
            </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可以寫一個組件,但是這個組件就不能懶加載了，本來的作用就是如果網(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只有在第一次請求那個路由組件才會去調(diào)用資源請求，第二次就不會再去調(diào)用的了，有緩存。

“react lazyLoad加載如何使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！