React 16.6的懒加载组件

最新推荐文章于 2024-08-29 08:30:00 发布

豆浆油条_煎bingo子

最新推荐文章于 2024-08-29 08:30:00 发布

阅读量899

点赞数 1

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/qq_45679015/article/details/124168507

版权

本文介绍了React 16.6中新增的React.lazy()和Suspense功能，用于实现代码拆分和懒加载组件，以提高应用性能。通过案例展示了如何使用这两个特性来优化股票列表应用，详细解释了如何进行预加载以减少用户首次点击时的等待时间，并探讨了预渲染组件的方法和潜在问题。

摘要由CSDN通过智能技术生成

首先，打包工具将我们的代码组件放在一个 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 })}
        /&