4.3 lazy与Suspense懒加载的组件

一、lazy与<Suspense>懒加载的组件

1. lazy能够在组件第一次被渲染之前延迟加载组件的代码

2. <Suspense>允许显示回退，直到其子项完成加载

3. 正常加载

   // 子组件
   console.log('head')
   
   function MyHead() {
     return (
       <>
         <div>Default Head</div>
       </>
     )
   }
   
   export default MyHead
   

   // 父组件
   import { useState, lazy } from 'react'
   import MyHead from './3_1'
   
   function App() {
     const [show, setShow] = useState(false)
   
     return (
       <>
         <div>Default Template</div>
         <button onClick={() => setShow(true)}>按钮</button>
         {show && <MyHead />}
       </>
     )
   }
   
   export default App
   

   即便不点按钮，子组件依旧会被加载，控制台依旧会有输出

4. 修改成懒加载模式

   // 父组件
   import { useState, lazy, Suspense } from 'react'
   
   // 修改成懒加载方式
   const MyHead = lazy(() => import('./3_1'))
   
   function App() {
     const [show, setShow] = useState(false)
   
     return (
       <>
         <div>Default Template</div>
         <button onClick={() => setShow(true)}>按钮</button>
         {/* 需要配合Suspense使用，不然报错 */}
         <Suspense fallback={<div>Loading...</div>}>{show && <MyHead />}</Suspense>
       </>
     )
   }
   
   export default App
   

   注意：Suspense与lazy需要配合使用