react 异步组件加载lazy与Suspense

场景，组件异步渲染期间懒加载，组件加载失败情况

1. lazy需要与Suspense配合使用
2. Suspense填充状态
3. fallback请求组件期间还没全部加载完成时显示的内容，需要传入组件实例 ，例如传入组件 ，例如 fallback={<loading/>}
4. getDerivedStateFromError /componentDidCatch 错误捕获

   import React, { lazy, Suspense, Component } from 'react';
   //lazy异步加载 Suspense填充状态
   // const LazyTemplate = lazy(() => import('./lazy/1.jsx'))
   //异步加载组件
   在network中可以看到curstomName.chunk.js请求，也就是加载的组件
   const LazyTemplate = lazy(() => import(/*webpackChunkName:'curstomName'*/'./index2'))
   class SuspenseDemo extends Component {
   state = {
   errorStatus: false
   }
   static getDerivedStateFromError() {
   return {
   errorStatus: true
   }
   }
   //同上方式
   // componentDidCatch() {
   //
   this.setState({
   //
   errorStatus: true
   //
   })
   // }
   render() {
   if (this.state.errorStatus) {
   return <div>异步请求失败</div>
   }
   return (
   <div>
   <Suspense fallback={<div>loading</div>}> <LazyTemplate></LazyTemplate></Suspense>
   </div >
   );
   }
   }
   export default SuspenseDemo;

   index2

   import React, { Component, } from 'react'
   export default function SuspenseDemo2() {
   return <div>异步请求组件</div>
   }
   

最后

以上就是欣喜康乃馨为你收集整理的react 异步组件加载lazy与Suspense的全部内容，希望文章能够帮你解决react 异步组件加载lazy与Suspense所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。