组件复用那些事儿 - React 实现按需加载轮子
前端JavaScript 2019-06-27
组件化在当今前端开发领域中是一个非常重要的概念。著名的前端类库，比如 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!
