react lazyLoad加载如何使用

阅读：558 来源：乙速云作者：代码code

react lazyLoad加载如何使用

1.lazyLoad用处

默认例如首页，如果有好十几个甚至百个路由，react是会默认一下全部把路由组件一下全部加载的，极可能造成页面卡顿。react lazyLoad就可以解决这个问题。

2.使用

我用的react版本是18,注意在主index.js中要去掉，不然会出现路由变化了，控制台也不报错但是页面不跳转的问题.

react lazyLoad加载如何使用

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 (
			
				
					
						React Router Demo

{/* 在React中靠路由链接实现切换组件--编写路由链接 */} About Home

{/* fallback可以写一个组件,但是这个组件就不能懒加载了，本来的作用就是如果网络等原因导致页面空白的话就用组件来替代 */} }> {/* 注册路由 */} ) } }

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 (
      
        
          
            
              React Router Demo
            
          
        
        
          
            
              {/* 在React中靠路由链接实现切换组件--编写路由链接 */}
              
                About
              
              
                Home
              
            
          
          
            
              
                {/* fallback可以写一个组件,但是这个组件就不能懒加载了，本来的作用就是如果网络等原因导致页面空白的话就用组件来替代 */}
                }>
                  {/* 注册路由 */}
                  
                    } />
                    } />
                  
                
              
            
          
        
      
    );
  }
}

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

分享到：

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们： hlamps#outlook.com （#换成@）。

上一篇： Nginx请求压缩如何实现

下一篇： Python中httptools模块如何使用

你可能感兴趣