什么是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函数
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懒加载基本实现的方法
更多React相关技术文章,请访问React答疑栏目进行学习!
以上就是什么是react懒加载的详细内容,更多请关注易知道|edz.cc其它相关文章!