码迷,mamicode.com
首页 > 其他好文 > 详细

React.lazy和Suspense组合实现组件懒加载

时间:2020-06-28 12:40:46      阅读:77      评论:0      收藏:0      [点我收藏+]

标签:否则   reac   rop   报错   app   webp   定义   加载   export   

如何使用

React.lazy可以像渲染常规组件一样处理动态引入的组件

// 先定义一个Counter组件
export default function Counter (props) {
  return (
    <h1>count: {props.count}</h1>
  )
}

当我们使用这个Counter组件时,需要用一个Suspense来包裹,React.lazy接受一个函数作为参数,表明我们是动态引入了某个组件。引入时我们可以使用webpackChunkName来自定义打包之后的文件名。 需要注意的是如果一个组件是异步组件 ,那我们必须要用一个Suspense组件来包裹,并且传入一个fallback的函数作为参数,表示在加载动态组件的过程中,页面上如何显示。如果不进行以上操作,否则React会报错。

const Counter = React.lazy(() => import(/* webpackChunkName: "Counter" */ ‘./Counter‘))
function App() {
  return (
    <div className="App">
      <Suspense fallback={<div>loading...</div>}>
        <Counter count="12" />
      </Suspense>
    </div>
  );
}

React.lazy和Suspense组合实现组件懒加载

标签:否则   reac   rop   报错   app   webp   定义   加载   export   

原文地址:https://www.cnblogs.com/guolizhi/p/13201942.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!