React.lazy(懒加载)

lxn_zyl

于 2021-05-31 10:41:08 发布

阅读量350

点赞数 1

CC 4.0 BY-SA版权

文章标签： reactjs

本文链接：https://blog.youkuaiyun.com/lxn_zyl/article/details/117411874

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用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