React懒加载组件实现

Posted voll

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React懒加载组件实现相关的知识,希望对你有一定的参考价值。

懒加载的好处

当我们一次性大批量的加载资源的时候,会占用大量的内存,尤其是在一些低内存的设备上会造成卡顿的现象,所以我们就需要在必要的时候再进行资源的加载。

懒加载就是在真正需要资源才加载资源,这样就可以节省内存,尽可能的减少卡顿现象的出现。

技术分享图片

懒加载原理

懒加载的原理就如上图所示,当组件进入可视区域加载子组件,不在可视区域内卸载子组件。懒加载的原理就是这么简单,下面介绍一下懒加载具体的实现方法。

1. 计算子组件是否在可视区域之内

const checkVisible = (component,offset=100,parent) => {
   //获取实际的DOM const node
= ReactDOM.findDOMNode(component)
  //获取距离顶部的距离 const {top}
= node.getBoundingClientRect() const windowHeight = window.innerHeight || document.documentElement.clientHeight const {top:parentTop,bottom:parentBottom } = parent.getBoundingClientRect()
   //可视区域顶部的位置 const finalTop
= Math.max(parentTop,0)
   //可视区域底部的位置 const finalBottom
= Math.min(parentBottom,windowHeight)
   //计算是否在可视区域之内
if(top > finalTop - 100 && top < finalBottom + 100){ return true } return false }

2. 添加滚动事件

首先我们先利用上面的函数检查检查子组件是否在可视区域内,如果是则设置isVisible为true,则显示组件,否则不显示组件。

checkedVisible(parent){
     //是否只懒加载一次,once为true 加载之后不再操作dom const once
= this.props.once ; const offset = this.props.offset return throttle(()=>{ const visibleState = this.state.isVisible if(!(once && visibleState)){ const isVisible = checkVisible(this,offset,parent) this.setState({isVisible}) } },200) }
const parent = getScrollParent(node);
const checkedVisibleFn = this.checkedVisible(parent) ;
//添加滚动事件
window.addEventListener("scroll",checkedVisibleFn,false)

为window对象添加滚动事件,为防止滚动事件频繁触发checkedVisible,我们为检查checkVisible函数节流,减少性能开销。此处我们利用的throttle函数,更多关于节流函数和函数去抖的介绍可参考这边博客:JS魔法堂:函数节流(throttle)与函数去抖(debounce)

3. 获取可滚动的父组件

当前我们只是为考虑了window对象可滚动的情况,如果是DOM对象可滚动我们就需要获取可滚动的父对象,而不只是仅仅window对象。

//获取滚动的父元素
const getScrollParent = (node) => {
    if(!node){
        return document.documentElement
    }

    let parent = node ;
    //正则
    const overflowReg = /(scroll|auto)/
    while(parent){
        if(!parent.parentNode){
            return document.documentElement 
        }
        const {overflow} = window.getComputedStyle(parent)
        if(overflowReg.test(overflow)){
            return parent
        }
        parent = parent.parentNode
    }
    return document.documentElement
}

export default getScrollParent

4. 再次添加滚动事件

如果不仅仅是window可滚动我们在添加滚动事件之前进行一次判断。

const node = ReactDOM.findDOMNode(this) ;
const parent = getScrollParent(node);
const checkedVisibleFn = this.checkedVisible(parent) ;

 if(parent === document.documentElement){
       window.addEventListener("scroll",checkedVisibleFn,false)
 }else{
       parent.addEventListener("scroll",checkedVisibleFn,false)
 }  

总结

以上基本就是react懒加载基本实现的方法,具体的代码以及demo,可以参考源码:https://github.com/volcanoliuc/react-lazyload-demo

此demo仅仅只是简化版的react懒加载,如果是在实际的项目中需要使用推荐使用 react-lazyload








以上是关于React懒加载组件实现的主要内容,如果未能解决你的问题,请参考以下文章

React.lazy和Suspense组合实现组件懒加载

React中路由懒加载与Suspense

在js代码中怎样用react 加载组件

如何加载新版本react addon

React 路由动态加载

React拓展 - setState - 路由组件懒加载 - Hooks - Fragment - Context - PureComponent - 插槽 - 错误边界 - 组件通信方式总结(代码片