React.lazy(懒加载)

最新推荐文章于 2025-04-21 09:56:10 发布

原创最新推荐文章于 2025-04-21 09:56:10 发布 · 378 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#reactjs

本文介绍了如何在React应用中实现组件的延迟加载，通过React的Suspense组件来展示加载状态。示例代码展示了如何使用lazy惰性加载Son1组件，并在加载期间显示'loading...'作为占位符。

使用lazy动态加载组件,使用Suspense包裹被懒加载的组件

语法:

import React from 'react'
const Son =React.lazy(()=>import('./Son1'))
const App=()=>{
  return <div>
    {/* fallblack里面可以写标签或者字符串在页面内容尚未加载出来时显示 */}
    <React.Suspense fallback={<h1>loading...</h1>}>
      <Son></Son>
    </React.Suspense>
  </div>
}
export default App