React 16.6的懒加载组件

首先，打包工具将我们的代码组件放在一个 javascript 块中，然后传递给浏览器； 但是随着我们的应用程序的增长，我们注意到包的大小变得非常笨重。 这会很快使应用程序的使用变得非常困难，而且速度特别慢。 而使用代码拆分，可以将包拆分为更小的块，其中可以首先加载最重要的块，然后延迟加载其他次要的块。
此外，在构建应用程序时，我们知道作为最佳实践，应考虑使用移动互联网数据的用户和其他互联网连接速度非常慢的用户。 我们开发人员应该始终能够控制用户体验，即使在资源加载到 DOM 的挂起阶段也可以。

React 16.6 添加了一个使代码拆分更容易的新功能：React.lazy()。
我们通过一个小演示看看如何以及为什么要使用此功能。我们有一个显示股票列表的应用程序， 当单击一只股票时，它会显示一个图表：

 

可以去github下载源码GitHub - pomber/react-lazy-preload-demo: Lazy loading (and preloading) components in React 16.6Lazy loading (and preloading) components in React 16.6 - GitHub - pomber/react-lazy-preload-demo: Lazy loading (and preloading) components in React 16.6https://github.com/pomber/react-lazy-preload-demo 我们只关心 App.js 文件中的内容：

import React from "react";
import StockTable from "./StockTable";

import StockChart from "./StockChart";

class App extends React.Component {
  state = {
    selectedStock: null
  };
  render() {
    const { stocks } = this.props;
    const { selectedStock } = this.state;
    return (
      <React.Fragment>
        <StockTable
          stocks={stocks}
          onSelect={selectedStock => this.setState({ selectedStock })}
        />
        {selectedStock && (
          <StockChart
            stock={selectedStock}
            onClose={() => this.setState({ selectedStock: false })}
          />
        )}