在 React 中如何使用 Suspense 进行代码分割和性能优化？

React Suspense 是 React 16.6 版本中新增的一個功能，它可以讓開發者更容易地對 React 應用程式進行代码分割，以及提升應用程式的性能。

代碼分割是一種技術，可以將應用程式的代碼分割成多個小塊，並在需要時才加載，而不是一次性加載所有代碼。這樣可以減少應用程式的初始加載時間，提高應用程式的性能。

React Suspense 可以讓開發者更容易地對應用程式進行代碼分割，並提供一個可以在加載時顯示載入指示器的 API。

如何使用 React Suspense 進行代碼分割？

要使用 React Suspense 進行代碼分割，首先需要使用 React.lazy() 將應用程式的組件包裝為一個動態加載的模組。

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

然後，可以使用 React.Suspense 組件來包裝動態加載的組件，並提供一個 fallback 屬性，用於在加載時顯示載入指示器：

這樣，當 MyComponent 組件被動態加載時，就會顯示載入指示器，而不會導致應用程式停頓。

總結

React Suspense 是 React 16.6 版本中新增的一個功能，可以讓開發者更容易地對 React 應用程式進行代碼分割，以及提升應用程式的性能。使用 React.lazy() 和 React.Suspense 組件，可以將應用程式的組件包裝為動態加載的模組，並在加載時顯示載入指示器，以提高應用程式的性能。