面试题：React中如何使用Hooks实现懒加载与Suspense集成的基础操作

Question

请描述在React项目中，使用Hooks来实现组件懒加载并配合Suspense组件的基本步骤。假设现在有一个组件`BigComponent`，需要对其进行懒加载，写出关键代码片段，并解释`Suspense`组件的`fallback`属性的作用。

Answer 1

1. 使用React.lazy和Suspense实现组件懒加载的基本步骤：
   • 步骤一：使用React.lazy懒加载组件 React.lazy函数用于动态导入组件，这样组件只有在需要渲染时才会被加载。

     const BigComponent = React.lazy(() => import('./BigComponent'));
     

   • 步骤二：使用Suspense组件包裹懒加载组件 在组件树中，需要使用Suspense组件包裹懒加载的组件。

     import React, { Suspense } from'react';
     
     function App() {
       return (
         <Suspense fallback={<div>Loading...</div>}>
           <BigComponent />
         </Suspense>
       );
     }
     
     export default App;
     

2. Suspense组件fallback属性的作用：
   • fallback属性接受一个React元素，当被包裹的懒加载组件（如BigComponent）正在加载时，Suspense组件会渲染fallback指定的元素。这使得在组件加载过程中，可以向用户展示一个加载指示器（如加载动画、“Loading...”文字等），提升用户体验，告知用户应用正在加载内容，而不是显示一片空白。