react-lazy-load粗读

最新推荐文章于 2024-08-24 08:46:31 发布
最新推荐文章于 2024-08-24 08:46:31 发布
阅读量189 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://juejin.im/post/5b753dd06fb9a009bd03d73e
版权

react-lazy-load粗读

近来没什么特别要做的事，下班回来的空闲时间也比较多，所以抽空看看懒加载是怎么实现的，特别是看了下 react-lazy-load 的库的实现。

懒加载

这里懒加载场景不是路由分割打包那种，而是单个页面中有一个很长的列表，列表中的图片进行懒加载的效果。

在 jquery 时代，这种列表图片懒加载效果就已经有了，那么我们想一想这种在滚动的时候才去加载图片等资源的方式该如何去实现呢？

大致原理

浏览器解析 html 的时候，在遇到 img 标签以及发现 src 属性的时候，浏览器就会去发请求拿图片去了。这里就是切入点，根据这种现象，做下面几件事：

  1. 把列表中所有的图片的 img 标签的 src 设为空
  2. 把真实的图片路径存成一个 dom 属性，打个比方: <img data-src='/xxxxx.jpg' />
  3. 写一个检测列表某一项是否是可见状态
  4. 全局滚动事件做一个监听，检测当前列表的项是否是可见的，如果可见则给 img 标签上存着真实图片路径赋值给 src 属性

react-lazy-load

知道懒加载的大概原理，来看一下 react-lazy-load 是怎么做的。

大体看了下 react-lazy-load 的实现的总体思路就更加简单了，本质上就是让需要懒加载的组件包含在这个包提供的 LazyLoad 组件中，不渲染这个组件，然后去监听这个 LazyLoad 组件是否已经是可见了，如果是可见了那么就去强制渲染包含在 LazyLoad 组件内部需要懒加载的组件了。

这种方式相较于手动去控制 img 标签来的实在是太方便了，完全以组件为单位，对组件进行懒加载。这样的话，完全就不需要感知组件内部的逻辑和渲染逻辑，无论这个需要懒加载的组件内部是有几个 img 标签，也完全不用去手动操控 src 属性的赋值。

react-lazy-load 之 render

class LazyLoad extends React.Component{
    constructor(props) {
        super(props)
        this.visible = false
    }
    componentDidMount() {
        // 主要是监听事件
        // 省略此处代码
    }
    shouldComponentUpdate() {
        return this.visible
    }
    componentWillUnmount() {
        // 主要是移除监听事件
        // 省略
    }
    render () {
        return this.visible
                ? this.props.children
                : this.props.placeholder
                    ? this.props.placeholder
                    : <div style={{ height: this.props.height }} className="lazyload-placeholder" />
    }
}
复制代码

从 render 函数能够看出来，依据当前 visible 的值来确定是否渲染 this.props.children，如果为 false 则去渲染节点的占位符。如果外部传入一个占位节点，就用这个传入的占位节点，否则就用默认的占位符去占位。注意到：shouldComponentUpdate 依据 this.visible 的值去判断是否更新组件。剩下的，该去看看如何监听事件以及修改 this.visible、强制重新渲染组件的。

react-lazy-load 之 componentDidMount

  componentDidMount() {
    // It's unlikely to change delay type on the fly, this is mainly
    // designed for tests
    const needResetFinalLazyLoadHandler = (this.props.debounce !== undefined && delayType === 'throttle')
      || (delayType === 'debounce' && this.props.debounce === undefined);

    if (needResetFinalLazyLoadHandler) {
      off(window, 'scroll', finalLazyLoadHandler, passiveEvent);
      off(window, 'resize', finalLazyLoadHandler, passiveEvent);
      finalLazyLoadHandler = null;
    }

    if (!finalLazyLoadHandler) {
      if (this.props.debounce !== undefined) {
        finalLazyLoadHandler = debounce(lazyLoadHandler, typeof this.props.debounce === 'number' ?
                                                         this.props.debounce :
                                                         300);
        delayType = 'debounce';
      } else if (this.props.throttle !== undefined) {
        finalLazyLoadHandler = throttle(lazyLoadHandler, typeof this.props.throttle === 'number' ?
                                                         this.props.throttle :
                                                         300);
        delayType = 'throttle';
      } else {
        finalLazyLoadHandler = lazyLoadHandler;
      }
    }

    if (this.props.overflow) {
      const parent = scrollParent(ReactDom.findDOMNode(this));
      if (parent && typeof parent.getAttribute === 'function') {
        const listenerCount = 1 + (+parent.getAttribute(LISTEN_FLAG));
        if (listenerCount === 1) {
          parent.addEventListener('scroll', finalLazyLoadHandler, passiveEvent);
        }
        parent.setAttribute(LISTEN_FLAG, listenerCount);
      }
    } else if (listeners.length === 0 || needResetFinalLazyLoadHandler) {
      const { scroll, resize } = this.props;

      if (scroll) {
        on(window, 'scroll', finalLazyLoadHandler, passiveEvent);
      }

      if (resize) {
        on(window, 'resize', finalLazyLoadHandler, passiveEvent);
      }
    }

    listeners.push(this);
    checkVisible(this);
  }
复制代码

needResetFinalLazyLoadHandler 先别关注，按他给注释说测试用。 finalLazyLoadHandler 依据外部 debounce 和 throttle 来选择是防抖还是节流还是都不用。根据外部传入的overflow 来确定是否是在某一个节点中 overflow 的下拉框的懒加载还是普通的整个 window 的懒加载。然后就是依据是 scroll 还是 resize 来给 window 增加监听事件 finalLazyLoadHandler。 最后就是把这个组件实例放到了 listeners 这个数组里，然后调用 checkVisible 检查是否可见。

react-lazy-load 之 checkVisible

/**
 * Detect if element is visible in viewport, if so, set `visible` state to true.
 * If `once` prop is provided true, remove component as listener after checkVisible
 *
 * @param  {React} component   React component that respond to scroll and resize
 */
const checkVisible = function checkVisible(component) {
  const node = ReactDom.findDOMNode(component);
  if (!node) {
    return;
  }

  const parent = scrollParent(node);
  const isOverflow = component.props.overflow &&
                     parent !== node.ownerDocument &&
                     parent !== document &&
                     parent !== document.documentElement;
  const visible = isOverflow ?
                  checkOverflowVisible(component, parent) :
                  checkNormalVisible(component);
  if (visible) {
    // Avoid extra render if previously is visible
    if (!component.visible) {
      if (component.props.once) {
        pending.push(component);
      }

      component.visible = true;
      component.forceUpdate();
    }
  } else if (!(component.props.once && component.visible)) {
    component.visible = false;
    if (component.props.unmountIfInvisible) {
      component.forceUpdate();
    }
  }
};
复制代码

parent 就是找到这个组件的上层组件的 dom 节点，通过 checkOverflowVisible 和 checkNormalVisible这两个函数拿到该节点是否在可视区域内得到 visible。然后依据 visible的值修改 component 的 visible的值，然后调用组件的 forceUpdate 方法，强制让组件重新渲染。主要到组件的 visible 并不是挂载到 state 上，所以这里不是用 setState 来重新渲染。

react-lazy-load 之 checkNormalVisible

/**
 * Check if `component` is visible in document
 * @param  {node} component React component
 * @return {bool}
 */
const checkNormalVisible = function checkNormalVisible(component) {
  const node = ReactDom.findDOMNode(component);

  // If this element is hidden by css rules somehow, it's definitely invisible
  if (!(node.offsetWidth || node.offsetHeight || node.getClientRects().length)) return false;

  let top;
  let elementHeight;

  try {
    ({ top, height: elementHeight } = node.getBoundingClientRect());
  } catch (e) {
    ({ top, height: elementHeight } = defaultBoundingClientRect);
  }

  const windowInnerHeight = window.innerHeight || document.documentElement.clientHeight;

  const offsets = Array.isArray(component.props.offset) ?
                component.props.offset :
                [component.props.offset, component.props.offset]; // Be compatible with previous API

  return (top - offsets[0] <= windowInnerHeight) &&
         (top + elementHeight + offsets[1] >= 0);
};
复制代码

主要逻辑就是拿到组件的 dom 节点的 getBoundingClientRect 返回值和 window.innerHeight 进行比较来判断是否是在可视范围内。这里在比较的时候还有个 component.props.offset 也参与了比较，说明设置了 offset 的时候，组件快要出现在可视范围的时候就会去重新渲染组件而不是出现在可视范围内才去重新渲染。

react-lazy-load 之 lazyLoadHandler

lazyLoadHandler 是组件绑定事件时会触发的函数。

const lazyLoadHandler = () => {
  for (let i = 0; i < listeners.length; ++i) {
    const listener = listeners[i];
    checkVisible(listener);
  }
  // Remove `once` component in listeners
  purgePending();
};
复制代码

每次监听事件执行的时候，都去检查一下组件，如果满足条件就去强制渲染组件。

react-lazy-load 之 componentWillUnmount

 componentWillUnmount() {
    if (this.props.overflow) {
      const parent = scrollParent(ReactDom.findDOMNode(this));
      if (parent && typeof parent.getAttribute === 'function') {
        const listenerCount = (+parent.getAttribute(LISTEN_FLAG)) - 1;
        if (listenerCount === 0) {
          parent.removeEventListener('scroll', finalLazyLoadHandler, passiveEvent);
          parent.removeAttribute(LISTEN_FLAG);
        } else {
          parent.setAttribute(LISTEN_FLAG, listenerCount);
        }
      }
    }

    const index = listeners.indexOf(this);
    if (index !== -1) {
      listeners.splice(index, 1);
    }

    if (listeners.length === 0) {
      off(window, 'resize', finalLazyLoadHandler, passiveEvent);
      off(window, 'scroll', finalLazyLoadHandler, passiveEvent);
    }
  }
复制代码

组件卸载的时候，把一些绑定事件解绑一下，细节也不说了。

总结

抛开 react-lazy-load 一些实现细节，从总体把握整个懒加载的过程，其实懒加载的原理并不难。当时我也看了一下 vue 那边的 vue-lazyLoad 这个库想写一个对比的文章，我以为这个 vue 库的内容会写的和 react-lazy-load 差不多，结果发现 vue-lazyLoad 代码很长而且好像比较复杂，所以也就没看了。

weixin_33937778
关注
react-lazyload：延迟加载组件，图像或任何与性能有关的内容
02-05
注意 该项目目前由维护，任何问题或帮助，请与他联系。 React延迟加载 延迟加载组件，图像或任何与性能有关的内容。 为什么更好 考虑到性能，所有延迟加载的组件只有2个事件侦听器 支持one-time lazy load和continuous lazy load模式 scroll / resize事件处理程序的速度，可以避免频繁更新，您也可以切换到防抖模式 支持装饰器 服务器端渲染友好 经过全面测试 安装 2.0.0终于发布了，请阅读《 ，几乎可以轻松升级！ 3.0.0通过使用React ref修复了findDomNode警告，以下是您需要注意的更改 现在我们有一个额外的div包装了延迟加载
react-lazy-load-image-component-demo:react-lazy-load-image-component 演示
05-30
这是react-lazy-load-image-component NPM 包的演示。 它既不打算在现实生活中使用，也不是好的编程实践的一个例子，而是要给出一个如何使用包react-lazy-load-image-component及其道具的例子。 观看现场演示： : ...
React 中的懒加载（Lazy Load）
JudithHuang的博客
03-22 1993
懒加载是一种在需要时才加载资源的策略，它允许我们将组件、图片、样式表或其他资源延迟加载到页面的某个特定点。在 React 中，懒加载通常用于延迟加载组件，尤其是对于那些不是一开始就需要渲染的大型组件或页面。
React Lazy Load 使用指南
最新发布
gitblog_00742的博客
08-24 784
React Lazy Load 使用指南 react-lazy-loadReact component that renders children elements when they enter the viewport.项目地址:https://gitcode.com/gh_mirrors/re/react-lazy-load 本指南旨在帮助您快速了解并开始使用 React Lazy Loa...
React - 路由 lazyLoad 的使用（路由懒加载）
技术共享，共同进步！
12-07 2826
React - 路由 lazyLoad 的使用（路由懒加载）
react-lazy-load
MichaelAn的博客
02-13 140
react-lazy-load react-lazy-load 库说明 在 jquery 中我们实现了图片的懒加载，当界面滚动到一定位置时再加载部分图片，这样可以节省带宽，提高首页加载速度。在博客日志，产品购物等界面使用很广。这个库在IE8以上的浏览器使用良好。 It's fast, works in IE8+...
react-lazyload
acay4499的博客
06-22 362
https://www.npmjs.com/package/react-lazyload 最近一天在研究界面懒加载，快要崩溃的时候 终于搞出来，所以我决定记录一下自己的小坑坑 始用时完全按照git上的demo来的，放到项目发现就是不好用。 在不断尝试中发现不好用是因为： 1.界面布局中始用了height：100%及 position:absolute; 所以导致无法准确的获取...
react-lazy-load:当组件进入视口时，React组件将呈现子元素
04-01
React惰性负载组件 React Lazy Load是易于使用的React组件，可帮助您以可预测的方式推迟加载内容。...import LazyLoad from 'react-lazy-load' ; const MyComponent = ( ) => ( Scroll to load images. < La
react-lazy-load-images
03-31
`react-lazy-load-images`库利用Intersection Observer API来检测图片是否进入视口。Intersection Observer是一个浏览器原生API，可以监听DOM元素何时与其他元素（如视口）发生交集，这为开发者提供了无阻塞的、高...
react-use-lazy-load-image:轻松将图像延迟加载添加到您的React应用
05-02
react-use-lazy-load-image使用为延迟加载的图像提供高性能解决方案，该图像不涉及滚动事件侦听器。 IntersectionObserver API仍然很新，因此较旧的浏览器可能不支持此功能，但是对于这些用例，可以使用一些不错的...
react-lazyimg-component:带有用于延迟加载图像的打字稿的React组件
05-29
react-lazyimg-component react-lazyimg-component v1.0.0 是使用 、、完全重构的，React 图片懒加载小组件。并且组件参考了 动画实现原理 ，引入全新的渐进性自然过渡效果（如下图 方案 B 所示）。 Demo 效果 ...
React-reactlazyload懒加载你的组件图片和其它与性能相关的任何东西
08-14
react-lazyload - 懒加载你的组件、图片和其它与性能相关的任何东西
react-lazy-load, 当子元素进入viewport时，响应它们呈现子元素.zip
10-10
react-lazy-load, 当子元素进入viewport时，响应它们呈现子元素 延迟加载 组件反应 延迟加载 很容易使用响应组件，它帮助你以可以预测的方式延迟加载内容。 速度快，工作在 IE8+，6KB 缩小，在默认情况下使用去抖功能。 你还可以在滚动容器中使用组件，如带滚动条的div 。 它会自动找到。 查看一个
React路由组件的lazyLoad
qq_28297649的博客
03-12 165
1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包 const Login = lazy(()=>import('@/pages/Login')) 2.通过<Suspense>指定在加载得到路由打包文件前显示一个自定义loading界面 <Suspense fallback={<h1>loading.....</h1>}> <...
react的懒加载lazyLoad的使用
u014496893的博客
01-08 2133
引入layLoad，可以实现当用户点击了某个组建的时候才会加载 import React, { Component, lazy, Suspense } from "react"; import React, { Component, lazy, Suspense } from "react"; import { Route, Switch, Redirect, NavLink } from "react-router-dom"; import Loading from "./Loading"; const
谈一谈react-lazyload插件
weixin_45316326的博客
07-04 3053
前言 因为是个论坛类的项目，所以在列表中有大量的图片，因此图片懒加载就变得必不可少了。项目是用react搭建的 所以就去网上找了一下好用的react懒加载组件，最后选用的github上start比较多的 react-lazyload api地址>> 正文 ok，打开api，看了一下具体用法 import React from ‘react’; import LazyLoad fro...
React lazyLoad懒加载
小怪獸丶的糖的专栏
02-14 621
在React中使用lazy懒加载 效果图 目录结构 index.js import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; import { BrowserRouter } from "react-router-dom"; ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter&gt
React Route: Not Found 页
学习笔记
02-03 1140
Not Found 放在所有 Route 最后，使用星号 * 匹配一切路由。 语法： <Route path="*"> <NotFound /> </Route> code example: import { Route, Switch, Redirect } from "react-router-dom"; import AllQuotes from "./pages/AllQuotes"; import QuoteDetail
React学习笔记——lazyLoad
weixin_45664402的博客
04-19 254
当未使用懒加载时，页面一打开，就将所有的路由组件给加载到页面了 如果路由组件很多，且用户不会真正访问到那么多的路由组件，那么就相当于加载了不需要的多余组件 因此，可以使用路由懒加载，当用户真正需要访问的时候再去请求 如下 import {lazy, Suspense} from 'react' import {Route} from 'react-router-dom' const Home = lazy(()=>import('./home')) const About = lazy(()=&.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值