reactlazyLoad加载使用详解

react lazyLoad加载 react lazyLoad使用 2023-03-03 11:03:57 251人浏览八月长安

摘要

目录1.lazyLoad用处2.使用2.1 React-router-dom5版本写法2.2 react-router-dom6版本写法1.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"><h2>React Router Demo</h2></div>
					</div>
				</div>
				<div className="row">
					<div className="col-xs-2 col-xs-offset-2">
						<div className="list-group">
							{}
							<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">
								 {}
								<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">
              {}
              <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">
                {}
                <Suspense fallback={<Loading />}>
                  {}
                  <Routes>
                    <Route path="/about" element={<About/>} />
                    <Route path="/home" element={<Home/>} />
                  </Routes>
                </Suspense>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

需要注意的是，lazyLoad只有在第一次请求那个路由组件才会去调用资源请求，第二次就不会再去调用的了，有缓存。

到此这篇关于react lazyLoad加载使用详解的文章就介绍到这了,更多相关react lazyLoad内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: reactlazyLoad加载使用详解

本文链接: https://www.lsjlt.com/news/198336.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341