REACT组件懒加载

元旦了。😁

react 16.6开始加入了代码拆分和懒加载功能，减轻了很多开发者的工作。

安装

$ npm install --save react react-dom
    or
$ yarn add react react-dom

在要处理延迟加载的组件中导入Suspense并lazy:

import React, { lazy, Suspense } from 'react';

代码拆分

虽然Suspense并且lazy允许快速创建延迟加载组件，但如果将整个应用程序打包到Webpack这样的单个文件中并没有什么好处。

Webpack不在本文的讨论范围，可以在Webpack文档的代码拆分一章中查阅。

lazy 方法

lazy方法将一个函数作为第一个参数：

const SomeComponent = lazy(() => import('./SomeComponent');

因为import传递给函数的内部，所以在实际使用组件之前不会加载组件。

Suspense 属性

React.Suspense 允许开发者将组件包装起来并指定fallback在加载时要显示的组件：

<Suspense fallback={<div>Loading...</div>}>
  <SomeComponent />
</Suspense>

当加载大型组件或导入大型库（如react-pdf或react-draft-wysiwyg）时，这就很有用了。

即使组件不常用，延迟加载也可以让用户有最佳的网络连接体验。

使用

创建两个文件：一个是我们正常的组件，一个是延迟加载组件。

一个非常简单的懒加载组件：

import React from "react";

function AllLogo() {
  const imageSource = "https://example.com"
    + "/imgs"
    + "/all-logo.png";

  return (
    <img
      alt="All Logo"
      src={imageSource}
      width="250"
    />
  );
}

export default AllLogo;

然后是一些状态逻辑处理，以便可以手动触发组件的加载：

import React, { Component, Fragment, lazy, Suspense } from "react";
import { render } from "react-dom";

import "./styles.scss";

const AllLogo = lazy(() => import("./AllLogo"));

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      showLogo: false
    };
  }

  onClick = () => {
    this.setState({ showLogo: !this.state.showLogo });
  };

  render() {
    return (
      <div className="App">
        <h1>REACT 懒加载特性</h1>
        <div>
          <button onClick={this.onClick}>
            {this.state.showLogo &&
              <Fragment>隐藏</Fragment>
            }
            {!this.state.showLogo && (
              <Fragment>显示</Fragment>
            )}
          </button>
        </div>
        <hr />
        {this.state.showLogo && (
          <Suspense fallback={<div>Loading...</div>}>
            <AllLogo />
          </Suspense>
        )}
      </div>
    );
  }
}

const container = document.createElement("div");
document.body.appendChild(container);
render(<App />, container);

可以看到，修改正在开发或者现有的项目不会有太多改动，特别是已经将组件拆分的项目。

优点

引入React.lazy()和React.Suspense，可以减少编写Web程序的代码量。

React未来版本将在Suspense中加入数据获取功能，那么Suspense就可以等待AJAX​​请求数据后在加载时显示组件。

但要注意，Suspense还不能在服务器端渲染的时候使用。

code enjoy! 🤪🤪🤪

作者：indeex

链接：https://indeex.cc

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。