React中使用LazyBuilder实现页面懒加载方法二

前言：

        在一个表格中，需要展示100条数据，当每条数据里面需要承载的内容很多，需要渲染的元素也很多的时候，容易造成页面加载的速度很慢，不能给用户提供很好的体验时，懒加载是优化页面加载速度的方法之一。

策略：
        前端在接受到api返回的数据的时候，可以先根据数据总的条数进行遍历，给每一项初始化简单的dom进行渲染占位，通过IntersectionObserver对每一项元素进行监听，当初始dom出现在页面视口的时候，需要替换掉初始dom，渲染真实dom。这样可以实现：在初始dom出现在视口内时，替换掉初始dom，渲染真实dom，并取消对该dom的监听，实现只需加载一次，首次加载多少个真实dom，取决于可视区域跟初始dom的高度。

React中使用LazyBuilder实现页面懒加载方法一

与方法一不同之处：

方法一：元素出现在可视区域内，即渲染真实dom，一旦消失在可视区域内，即渲染初始dom

方法二：元素只要出现在可视区域内一次，即渲染真实dom，并且取消对该dom的监听，只需加载一次

LazyBuilder.jsx

import React, { Component, createRef } from "react";
class LazyBuilder extends Component {
  static defaultProps = {
      initComponent: null,
      initHeight: null,
      controller: null,
      className: null,
      style: null,
  }
  /**
   * @param {Object} props
   * @param {JSX.Element} [props.initComponent] - 默认组件
   * @param {Number} [props.initHeight] - 组件高度
   * @param {LazyController} [props.controller] - LazyController
   */
  constructor(props) {
    super(props);
    this._ref = createRef();
    this.controller = this.props.controller instanceof LazyController ? this.props.controller : new LazyController();
    this.state = {
        isLoading: true,
        initStyle: {
          width: "100%",
          height: props.initHeight
        },
        key: `lazy_${Math.random().toString(16).slice(2)}`,
    }
  }

  componentDidMount() {
    // 页面初始化时，对所有元素进行绑定监听
    this.controller.observe(this._ref.current, this.updateShowElement.bind(this));
  }

  // 组件销毁时
  componentWillUnmount() {
    const { autoDispose } = this.props;
    if (autoDispose && this.controller.size() === 0) {
      this.controller.dispose();
      return;
    }
    this.controller.unobserve(this._ref.current);
  }

  updateShowElement = () => {
    // 元素出现在视口以内
    this.setState({
      isLoading: false,
      initStyle: null,
    });
  }

  render () {
    const { children, initComponent } = this.props;
    const { isLoading, initStyle } = this.state;
    const className = ["lazy-builder-item", this.props.className].filter(item => typeof item === "string").join("\s");
    return (
        <div id={this.state.key} ref={this._ref} className={className} style={Object.assign({}, initStyle, this.props.style)}>
          {
            isLoading ? initComponent : children
          }
        </div>
    );
  }
}

class LazyController {
  constructor(){

    // 定义map来存储所有的dom项
    this._map = new Map();

    // IntersectionObserver 对每一项元素进行监听
    this.observer = new IntersectionObserver((entries) => {
      for (const entry of entries) {
        // isIntersecting: true - 出现在视口    false - 隐藏（视口以外）
        if (entry.isIntersecting) {
          const updateShowElement = this._map.get(entry.target);
          if (typeof updateShowElement === "function") {
            updateShowElement()
          }
          this.unobserve(entry.target);
        }
      }
    });
  }

  // 观察指定DOM
  observe = (target, callback) => {
    if (this.observer && !this.has(target)) {
        this._map.set(target, callback);
        this.observer.observe(target);
    }
  }

  // 取消对指定DOM的观察
  unobserve = (target) => {
    if (this.observer && this.has(target)) {
      this.observer.unobserve(target);
      this._map.delete(target);
    }
  }

  // 判断一个DOM是否正在被观察
  has = (target) => {
    return this._map.has(target);
  }

  // 返回正在观测中的DOM数量
  size = () => {
    return this._map.size();
  }

  // 停止对所有DOM的观测并销毁IntersectionObserver实例
  dispose = () => {
    if (this.observer == null) {
      throw new Error("observer未初始化");
    }
    this._map.clear();
    this.observer.disconnect();
    this.observer = null;
  }
}

export {
  LazyBuilder,
  LazyController,
}

Cp.jsx

export default class  Cp extends Component {
  constructor(props){
    super(props)

    // 创建controller
    this.controller = new LazyController();
    this.state = {
      // 模拟数据
      dataList: new Array(100).fill().map((item, index) => index + 1)
    }
  }

  componentWillUnmount() {
    this.controller.dispose();
  }

  render(){
    const {dataList} = this.state
    return (
      <div>
        {
          Array.isArray(dataList) && dataList.length > 0
          ? dataList.map((item, index) => {
            return <LazyBuilder 
                    key={index}
                    initHeight={200} // 初始dom高度
                    controller={this.controller} // controller
                  >
                    <div style={{width: '100%', height: '200px'}}>{`第${item}个元素`}</div>
                  </LazyBuilder>
          })
          : null
        }
      </div>
    )
  }
}

初次加载：

滚动后：