react React.lazy和React.Suspense实现组件懒加载以及加载前展示

布满荆棘的人生 2021-07-24 21:20 397阅读 0赞

使用:
    	import React,{lazy,Suspense} from 'react'
    	
    	React.lazy:
    		const 懒加载组件=lazy(()=>import('../组件地址'));
    	
    	React.Suspense:
    		因为组件是懒加载,在渲染时被暂停了,react无法得知渲染内容,为了避免报错使用Suspense来进行空档期的显示
    		
    		<Suspense fallback={空档期显示的组件}>
    			<懒加载组件 />
    		</Suspense>
    	
    	通过componentDidCatch来捕捉组件加载过程的错误

效果图:  
![在这里插入图片描述][20201126145356434.png_pic_center]

代码示例:

import React,{ Component,lazy,Suspense} from 'react'
    // import Slider from './slider/slider'
    const Slider=lazy(()=>import('./slider/slider'))
    
    class App extends Component{ 
    
        state={ 
            count:0,
            count1:{ a:1,b:2}
        }
    
        _onClick()
        { 
            this.state.count1.a++;
            this.setState({ 
                count:this.state.count+1,
                count1:this.state.count1
            })
        }
    
        render()
        { 
            const { count,count1}=this.state;
            return(
    
                <div>
                    <button onClick={ this._onClick.bind(this)}>改变</button>
                    <Suspense fallback={ <div>等待中</div>}>
                        <Slider count1={ count1}></Slider>
                    </Suspense>
                </div>
            )
        }
    }
    
    export default App

[20201126145356434.png_pic_center]: /images/20210724/39e68aa1af2d46e38ef5285ae332bbf3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，397人围观）

还没有评论，来说两句吧...

相关阅读

相关性能优化-react路由懒加载和组件懒加载

当你在一个较大的React应用中使用路由和组件时，性能优化变得至关重要。React Router提供了一种方法来实现路由懒加载，而React本身支持组件懒加载。这两者的结合可以

梦里梦外;/ 2024年03月23日 21:48/ 0 赞/ 61 阅读

相关 react懒加载

![在这里插入图片描述][20191008083714245.png] 新建lazy文件夹和lazy/index.js文件，内容如下 import React f

不念不忘少年蓝@/ 2023年06月04日 12:57/ 0 赞/ 7 阅读

相关 React懒加载长页面 - 动态渲染组件

背景长页面在前端开发中是非常常见的。例如下图中的电商首页，楼层数据来自运营人员在后台的配置，楼层数量是不固定的，同时每个楼层可能会依赖更多翻页数据。在这种情况下，如果一

旧城等待，/ 2023年01月17日 08:00/ 0 赞/ 136 阅读

相关懒加载(Lazy Loading) - MyBatis懒加载 - Spring懒加载

文章目录懒加载(Lazy Loading) MyBatis中懒加载的使用 Spring中懒加载的使用懒加载(

Dear 丶/ 2022年12月10日 15:53/ 0 赞/ 431 阅读

相关懒加载 React 长页面 - 动态渲染组件

背景长页面在前端开发中是非常常见的。例如下图中的电商首页，楼层数据来自运营人员在后台的配置，楼层数量是不固定的，同时每个楼层可能会依赖更多翻页数据。在这种情况下，如果一

心已赠人/ 2022年10月15日 00:50/ 0 赞/ 241 阅读

相关 javascript实现图片懒加载和预加载

所谓懒加载就是通过某些特定的条件，然后再给图片的src赋值，常见的懒加载方式有点击加载和滚动加载。如果是点击加载，那么一般是通过点击事件。例如： ![这里写图片描述]

客官°小女子只卖身不卖艺/ 2022年05月28日 04:51/ 0 赞/ 317 阅读

相关懒加载，预加载

-------------------- 一.懒加载 > 1.what: > > 延迟加载，一种很好的优化网页性能方式。可视区域外的东西不会加载，减少服务器的负载

骑猪看日落/ 2022年05月14日 10:14/ 0 赞/ 427 阅读

相关前端懒加载以及预加载

懒加载（延迟加载）：延迟加载图片或符合某些条件时才加载某些图片。预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。两种技术的本质：两者的行为是相反

客官°小女子只卖身不卖艺/ 2021年09月14日 01:14/ 0 赞/ 497 阅读

相关 react React.lazy和React.Suspense实现组件懒加载以及加载前展示

使用: import React,{lazy,Suspense} from 'react' React.lazy: cons

布满荆棘的人生/ 2021年07月24日 21:20/ 0 赞/ 398 阅读

相关 vue 图片懒加载和懒加载原理

在真实图片得到之前,展示懒加载设置的图片 1、安装 cnpm i vue-lazyload -S 2、main.js

你的名字/ 2021年07月24日 20:08/ 0 赞/ 912 阅读