117笔记问答React.lazy() 和 React.Suspense 是 React 中用于实现代码分割和懒加载的两个关键特性。它们的实现原理主要基于以下几个方面：
-
动态导入（Dynamic Imports）：
- 使用
import()语法可以动态地导入模块，而不是在应用启动时一次性加载所有代码。 - 这个语法返回一个 Promise，当模块被成功加载后，Promise 会 resolve，并返回模块的导出对象。
- 使用
-
React.lazy()：
React.lazy()是一个高阶组件，它接受一个函数作为参数，该函数应该返回一个动态导入的模块。- 通过使用
React.lazy()，你可以将某个组件分割成单独的代码块，并在需要时懒加载它。 - 这样做的好处是可以减小应用的初始加载时间，因为用户只需要加载他们实际需要的功能。
-
React.Suspense：
React.Suspense是一个用于在等待异步操作（如代码分割）完成时显示占位内容的组件。- 它通常与
React.lazy()一起使用，以便在懒加载的组件被加载并渲染之前，显示一个加载指示器或骨架屏。 React.Suspense的fallback属性用于指定在等待异步操作完成时要显示的占位内容。
-
React.lazy() 和 React.Suspense 的结合使用：
- 当你使用
React.lazy()来懒加载一个组件时，你需要在应用的顶层组件中使用React.Suspense来包裹它。 - 这样，当懒加载的组件被加载并渲染时，
React.Suspense会等待 Promise resolve，并在加载完成后渲染该组件。 - 如果在加载过程中发生错误，
React.Suspense可以捕获该错误，并显示一个错误提示或备用内容。
- 当你使用
总的来说，React.lazy() 和 React.Suspense 的实现原理主要基于动态导入和异步渲染技术。通过这两个特性，你可以将应用分割成多个代码块，并在需要时懒加载它们，从而优化应用的性能和用户体验。