组件复用那些事儿 - React 实现按需加载轮子

avatar
。 @。

组件化在当今前端开发领域中是一个非常重要的概念。著名的前端类库,比如 React、Vue 等对此概念都倍加推崇。确实,组件化复用性(reusability)和模块性(modularization)的优点对于复杂场景需求具有先天优势。组件就如同乐高积木、建筑石块一般,一点点拼接构成了我们的应用。

同时,懒加载(Lazy-loading)/按需加载概念至关重要。它对于页面性能优化,用户体验提升提供了新思路。在必要情况下,我们请求的资源更少、解析的脚本更少、执行的内容更少,达到效果也就越好。

这篇文章将从懒加载时机、组件复用手段、代码实例三方面来分析,happy reading!

按需加载场景设计分析

一个典型的页面如下图:

页面构成

它包含了以下几个区块:

  • 一个头部 header;
  • 图片展示区;
  • 地图展现区;
  • 页面 footer。

对应代码示例:

const Page = () => {
  <div>
    <Header />
    <Gallery />
    <Map />
    <Footer />
  </div>
};

当用户来访时,如果不滚动页面,只能看见头部区域。但在很多场景下,我们都会加载所有的 JavaScript 脚本、 CSS 资源以及其他资源,进而渲染了完整页面。这明显是不必要的,消耗了更多带宽,延迟了页面 load 时间。为此,前端历史上做过很多懒加载探索,很多大公司的开源作品应势而出:比如 Yahoo 的 YUI Loader,Facebook 的 Haste, Bootloader and Primer等。时至今日,这些实现懒加载脚本的代码仍有学习意义。这里不再展开。

如下图,在正常逻辑情况下,代码覆盖率层面,我们看到 1.1MB/1.5MB (76%) 的代码并没有应用到。

代码覆盖率

另外,并不是所有资源都需要进行懒加载,我们在设计层面上需要考虑以下几点:

  • 不要按需加载首屏内容。这很好理解,首屏时间至关重要,用户能够越早看到越好。那么如何定义首屏内容?这需要结合用户终端,站点布局来考虑;
  • 预先懒加载。我们应该避免给用户呈现空白内容,因此预先懒加载,提前执行脚本对于用户体验的提升非常明显。比如下图,在图片出现在屏幕 100px 时,提前进行图片请求和渲染;

预先加载

  • 懒加载对 SEO 的影响。这里面涉及到内容较多,需要开发者了解搜索引擎爬虫机制。以 Googlebot 为例,它支持 IntersectionObserver,但是也仅仅对视口里内容起作用。这里不再详细展开,感兴趣的读者可以通过测试页面以及测试页面源码,并结合 Google 站长工具:Fetch as Google 进行试验。

React 组件复用技术

提到组件复用,大多开发者应该对高阶组件并不陌生。这类组件接受其他组件,进行功能增强,并最终返回一个组件进行消费。React-redux 的 connect 即是一个 currying 化的典型应用,代码示例:

const MyComponent = props => (
  <div>
    {props.id} - {props.name}
  </div>
);
// ...
const ConnectedComponent = connect(mapStateToProps, mapDispatchToProps)( MyComponent );

同样,Function as Child Component 或者称为 Render Callback 技术也较为常用。很多 React 类库比如 react-media 和 unstated 都有广泛使用。以 react-media 为例:

const MyComponent = () => (
  <Media query="(max-width: 599px)">
    {matches =>
      matches ? (
        <p>The document is less than 600px wide.</p>
      ) : ( <p>The document is at least 600px wide.</p>
      )
    }
  </Media>
);

Media 组件将会调用其 children 进行渲染,核心逻辑为:

class Media extends React.Component {
	...
	render() {
		React.Children.only(children)
	}
}

这样,子组件并不需要感知 media query 逻辑,进而完成复用。

除此之外,还有很多组件复用技巧,比如 render props 等,这里不再一一分析。感兴趣的读者可以在我的新书中找到相关内容。

代码实战

下面让我们动手实现一个按需加载轮子。首先需要设计一个 Observer 组件,这个组件将会去检测目标区块是否在视口之中可见。为了简化不必要的逻辑,我们使用 Intersection Observer API,这个方法异步观察目标元素的可视状态。其兼容性可以参考这里

class Observer extends Component {
  constructor() {
    super();
    this.state = { isVisible: false };
    this.io = null;
    this.container = null;
  }
  componentDidMount() {
    this.io = new IntersectionObserver([entry] => {
      this.setState({ isVisible: entry.isIntersecting });
    }, {});
    this.io.observe(this.container);
  }
  componentWillUnmount() {
    if (this.io) {
      this.io.disconnect();
    }
  }
  render() {
    return (
      // 这里也可以使用 findDOMNode 实现,但是不建议
      <div
        ref={div => {
          this.container = div;
        }}
      >
        {Array.isArray(this.props.children)
          ? this.props.children.map(child => child(this.state.isVisible))
          : this.props.children(this.state.isVisible)}
      </div>
    );
  }
}

如上,该组件具有 isVisible 状态,表示目标元素是否可见。this.io 表示当前 IntersectionObserver 实例;this.container 表示当前观察元素,它通过 ref 来完成目标元素的获取。

componentDidMount 方法中,我们进行 this.setState.isVisible 状态的切换;在 componentWillUnmount 方法中,进行垃圾回收。

很明显,这种复用方式为前文提到的 Function as Child Component。

注意,对于上述基本实现,我们完全可以进行自定义的个性化设置。IntersectionObserver 支持 margins 或者 thresholds 的选项。我们可以在 constructor 里实现配置项目初始化,在 componentWillReceiveProps 生命周期函数中进行更新。

这样一来,针对前文页面内容,我们可以进行 Gallery 组件和 Map 组件懒加载处理:

const Page = () => {
    <div>
        <Header />
        <Observer>
          {isVisible => <Gallery isVisible />}
        </Observer>
        <Observer>
          {isVisible => <Map isVisible />}
        </Observer>
        <Footer />
    </div>
}

我们将 isVisible 状态进行传递。相应消费组件可以根据 isVisible 进行选择性渲染。具体实现:

class Map extends Component {
  constructor() {
    super();
    this.state = { initialized: false };
    this.map = null;
  }
initializeMap() {
    this.setState({ initialized: true });
    // 加载第三方 Google map
    loadScript("https://maps.google.com/maps/api/js?key=<your_key>", () => {
      const latlng = new google.maps.LatLng(38.34, -0.48);
      const myOptions = { zoom: 15, center: latlng };
      const map = new google.maps.Map(this.map, myOptions);
    });
  }
componentDidMount() {
    if (this.props.isVisible) {
      this.initializeMap();
    }
  }
componentWillReceiveProps(nextProps) {
    if (!this.state.initialized && nextProps.isVisible) {
      this.initializeMap();
    }
  }
render() {
    return (
      <div
        ref={div => {
          this.map = div;
        }}
      />
    );
  }
}

只有当 Map 组件对应的 container 出现在视口时,我们再去进行第三方资源的加载。

同样,对于 Gallery 组件:

class Gallery extends Component {
  constructor() {
    super();
    this.state = { hasBeenVisible: false };
  }
  componentDidMount() {
    if (this.props.isVisible) {
      this.setState({ hasBeenVisible: true });
    }
  }
  componentWillReceiveProps(nextProps) {
    if (!this.state.hasBeenVisible && nextProps.isVisible) {
      this.setState({ hasBeenVisible: true });
    }
  }
  render() {
    return (
      <div>
        <h1>Some pictures</h1>
        Picture 1
        {this.state.hasBeenVisible ? (
          <img src="http://example.com/image01.jpg" width="300" height="300" />
        ) : (
          <div className="placeholder" />
        )}
        Picture 2
        {this.state.hasBeenVisible ? (
          <img src="http://example.com/image02.jpg" width="300" height="300" />
        ) : (
          <div className="placeholder" />
        )}
      </div>
    );
  }
}

也可以使用无状态组件/函数式组件实现:

const Gallery = ({ isVisible }) => (
  <div>
    <h1>Some pictures</h1>
    Picture 1
    {isVisible ? (
      <img src="http://example.com/image01.jpg" width="300" height="300" />
    ) : (
      <div className="placeholder" />
    )}
    Picture 2
    {isVisible ? (
      <img src="http://example.com/image02.jpg" width="300" height="300" />
    ) : (
      <div className="placeholder" />
    )}
  </div>
);

这样无疑更加简洁。但是当元素移出视口时,相应图片不会再继续展现,而是复现了 placeholder。

如果我们需要懒加载的内容只在页面生命周期中记录一次,可以设置 hasBeenVisible 参数:

const Page = () => {
  ...
  <Observer>
    {(isVisible, hasBeenVisible) =>
      <Gallery hasBeenVisible /> // Gallery can be now stateless
    }
  </Observer>
  ...
}

或者直接实现 ObserverOnce 组件:

class ObserverOnce extends Component {
  constructor() {
    super();
    this.state = { hasBeenVisible: false };
    this.io = null;
    this.container = null;
  }
  componentDidMount() {
    this.io = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          this.setState({ hasBeenVisible: true });
          this.io.disconnect();
        }
      });
    }, {});
    this.io.observe(this.container);
  }
  componentWillUnmount() {
    if (this.io) {
      this.io.disconnect();
    }
  }
  render() {
    return (
      <div
        ref={div => {
          this.container = div;
        }}
      >
        {Array.isArray(this.props.children)
          ? this.props.children.map(child => child(this.state.hasBeenVisible))
          : this.props.children(this.state.hasBeenVisible)}
      </div>
    );
  }
}

更多场景

上面我们使用了 Observer 组件去加载资源。包括了 Google Map 第三方内容和图片。我们同样可以完成“当组件出现在视口时,才展现元素动画”的需求。

仿照 React Alicante 网站,我们实现了类似的按需执行动画需求。具体可见 codepen 地址。

IntersectionObserver polyfilling

前面提到了 IntersectionObserver API 的兼容性,这自然就绕不开 polyfill 话题。

一种处理兼容性的选项是“渐进增强”(progressive enhancement),即只有在支持的场景下实现按需加载,否则永远设置 isVisible 状态为 true:

class Observer extends Component {
  constructor() {
    super();
    this.state = { isVisible: !(window.IntersectionObserver) };
    this.io = null;
    this.container = null;
  }
  componentDidMount() {
    if (window.IntersectionObserver) {
      this.io = new IntersectionObserver(entries => {
        ...
      }
    }
  }
}

这样显然不能实现按需的目的,我更加推荐 w3c 的 IntersectionObserver polyfill

class Observer extends Component {
  ...
  componentDidMount() {
    (window.IntersectionObserver
      ? Promise.resolve()
      : import('intersection-observer')
    ).then(() => {
      this.io = new window.IntersectionObserver(entries => {
        entries.forEach(entry => {
          this.setState({ isVisible: entry.isIntersecting });
        });
      }, {});
      this.io.observe(this.container);
    });
  }
  ...
}

当浏览器不支持 IntersectionObserver 时,我们动态 import 进来 polyfill,这就需要支持 dynamic import,此为另外话题,这里不再展开。

最后试验一下,在不支持的 Safari 浏览器下,我们看到 Network 时间线如下:

时间线

总结

这篇文章介绍涉及到组件复用、按需加载(懒加载)实现内容。更多相关知识,可以关注作者新书。 同时这篇文章截取于 José M. Pérez 的 Improve the Performance of your Site with Lazy-Loading and Code-Splitting,部分内容有所改动。

广告时间: 如果你对前端发展,尤其对 React 技术栈感兴趣:我的新书中,也许有你想看到的内容。关注作者 Lucas HC,新书出版将会有送书活动。

Happy Coding!

PS: 作者 Github仓库 和 知乎问答链接 欢迎各种形式交流。

我的其他几篇关于React技术栈的文章:

React Redux 中间件思想遇见 Web Worker 的灵感(附demo)

从setState promise化的探讨 体会React团队设计思想

通过实例,学习编写 React 组件的“最佳实践”

React 组件设计和分解思考

从 React 绑定 this,看 JS 语言发展和框架设计

做出Uber移动网页版还不够 极致性能打造才见真章**

React+Redux打造“NEWS EARLY”单页应用 一个项目理解最前沿技术栈真谛**