react-lazyload 源码解析

懒加载也叫延迟加载，指的是在长网页中延迟加载dom(jquery时期常用于延迟加载图片，现在也会用于延迟加载复杂组件)，是优化网页性能的方式之一。当dom不在可视区内时，dom使用占位符展示，当到达可视区后再进行真实dom加载渲染。
所以我们首先要判断我们想要加载的内容是否在可视区域。这里应该有一个父级元素和子元素（如果没有父元素，浏览器适口就充当父级元素的角色）来定义”可视区域”的大小。

react-lazyload通过监听各个react生命周期，监听scroll，resize两个事件执行相应的操作

var LazyLoad = function (_Component) {
    ...
    _createClass(LazyLoad, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
        if (needResetFinalLazyLoadHandler) {
            (0, _event.off)(scrollport, 'scroll', finalLazyLoadHandler, passiveEvent);
            (0, _event.off)(window, 'resize', finalLazyLoadHandler, passiveEvent);
            finalLazyLoadHandler = null;
        }

        ...

        if (this.props.overflow) {
            var parent = (0, _scrollParent2.default)(this.ref);
            if (parent && typeof parent.getAttribute === 'function') {
              var 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) {
            var _props = this.props,
                scroll = _props.scroll,
                resize = _props.resize;


            if (scroll) {
              (0, _event.on)(scrollport, 'scroll', finalLazyLoadHandler, passiveEvent);
            }

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

/**
 * 检测元素是否在视口中可见，如果是，则将``visible''状态设置为true。如果将``once''属性设置为true，则在checkVisible之后移除组件作为侦听器
 * @param  {React} component 响应滚动和调整大小的React组件  
 */
var checkVisible = function checkVisible(component) {
  var node = component.ref;
  if (!(node instanceof HTMLElement)) { // 首先判断是不是HTMLElement元素，如果不是直接返回
    return; 
  }

  var parent = (0, _scrollParent2.default)(node); // 获取parent
  // 判断通过那种方式来进行判定（和父元素做比较，和视图做比较）
  var isOverflow = component.props.overflow && parent !== node.ownerDocument && parent !== document && parent !== document.documentElement;
  // checkOverflowVisible：检查`component`在溢出容器`parent`中是否可见
  // checkNormalVisible：检查`component`在文档中是否可见
  var visible = isOverflow ? checkOverflowVisible(component, parent) : checkNormalVisible(component);
  // 所以我们如果要用父元素做可视区域最好是设置overflow这个属性
  
  if (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();
    }
  }
};

参考：https://github.com/twobin/react-lazyload