如何为React组件添加懒惰加载

Jovie
195 阅读3分钟

懒惰加载是用来优化应用程序的。随着应用程序规模的增加，我们在应用程序中创建了更多的组件，导致了更广泛的应用程序捆绑规模。

随着我们的应用程序的捆绑大小的增加，应用程序需要更多的时间来加载，这降低了性能，是一个糟糕的用户体验的标志。

在本教程中，我们将研究如何在React中借助React.Lazy()和React.suspense方法实现懒惰加载，这将提高应用程序的性能并建立更好的用户体验。

什么是React.lazy()？

React.lazy()是React在16.6版本中引入的一个功能，它可以帮助我们通过代码分割来懒惰地加载我们的组件。在React v16.6之前，第三方库如react-loadable被用于懒惰加载组件。

让我们了解一下代码分割的含义。正如你从名字中可以猜到的那样，代码分割将我们的大捆代码分割成多个可以动态加载的捆包。

大多数React应用程序将使用Webpack、Rollup或Browserify等工具对其文件进行 "捆绑"。捆绑是跟随导入的文件并将它们合并成一个文件的过程：一个 "捆绑"。然后，这个捆绑文件可以包含在一个网页上，以便一次性加载整个应用程序。

React文件。

当你在使用任何应用程序/网站时，很有可能你永远不会有对某些组件的需求。所以渲染那些不会被用户使用的组件是没有意义的。在懒惰加载的帮助下，你首先加载页面上重要的项目（当用户访问该页面时将首先被查看），然后默默地加载其他项目。

这就加快了页面的加载时间，因为它避免了在时间之前下载资源。

说得够多了，让我们来写代码。

React.lazy()的操作

从创建react应用开始，或者简单地在浏览器中打开react.new。

React有两个功能可以使懒惰加载组件变得更容易。React.lazy()和React.suspense。

*React.lazy()接收一个函数，返回一个承诺，用import()加载所需组件

// App.js
import React from "react";
const LazyComponent = React.lazy(() => import("./Components/LazyComponent"));

const App = () => {
  return (
    <div>
      
    </div>
  );
};

export default App;

React.suspense

Suspense是一个用于包装懒惰组件的组件。由于我们的懒惰组件只有在需要渲染时才会显示。我们需要表明我们的组件正在被渲染。

React.suspense包装了我们的懒惰组件。我们可以在Suspense中使用多个懒惰组件。Suspense组件将React元素作为一个道具，在懒惰组件加载时显示信息。

// App.js
import React, { Suspense } from "react";
const LazyComponent = React.lazy(() =&gt; import("./Components/LazyComponent"));

const App = () =&gt; {
  return (
    <div>
      &lt;Suspense fallback={<div>Loading...</div>}&gt;
        
      
    </div>
  );
};

export default App;

懒惰加载路由

我们还可以在React.lazy()和React.suspense的帮助下进行基于路由的代码分割。

我们可以通过将路由组件转换为懒惰组件，并用React.suspense包装它们来实现**。**

// App.js
import React, { Suspense } from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
const LazyComponent = React.lazy(() =&gt; import("./Components/LazyComponent"));

const App = () =&gt; {
  return (
    
      &lt;Suspense fallback={<h1>Loading...</h1>}&gt;
        
          &lt;Route path=&quot;/&quot; element={} /&gt;
        
      
    
  );
};

export default App;

总结

在React.lazy()方法推出后，我们现在可以在不使用任何第三方库的情况下懒惰地加载我们的组件。React.lazy()和React.suspense让我们更容易提高React应用的性能。

谢谢你的阅读。

如果你有任何问题或建议，请随时评论。如果你想为一个特定的主题索取任何文章，请通过关于页面联系。我很愿意听到你的意见。

avatar
文章
阅读
粉丝