react?lazyLoad加載如何使用

本篇內容介紹了“react lazyLoad加載如何使用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

1.lazyLoad用處

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

2.使用

我用的react版本是18,注意在主index.js中<React.StrictMode>要去掉，不然會出現路由變化了，控制臺也不報錯但是頁面不跳轉的問題.

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中靠路由鏈接實現切換組件--編寫路由鏈接 */}
							<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可以寫一個組件,但是這個組件就不能懶加載了，本來的作用就是如果網絡等原因導致頁面空白的話就用組件來替代 */}
								<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中靠路由鏈接實現切換組件--編寫路由鏈接 */}
              <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可以寫一個組件,但是這個組件就不能懶加載了，本來的作用就是如果網絡等原因導致頁面空白的話就用組件來替代 */}
                <Suspense fallback={<Loading />}>
                  {/* 注冊路由 */}
                  <Routes>
                    <Route path="/about" element={<About/>} />
                    <Route path="/home" element={<Home/>} />
                  </Routes>
                </Suspense>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

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

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