React Suspense 是一項強大的功能,允許開發人員透過在載入元件或資料時顯示後備 UI 來優雅地處理非同步渲染。它與 React.lazy、並發渲染 和 資料取得 解決方案(例如 React Query、Relay 或自訂實作)協同工作。
import React, { Suspense } from "react"; const LazyComponent = React.lazy(() => import("./LazyComponent")); function App() { return ( <Suspense fallback={<div>Loading...</div>}> <LazyComponent /> </Suspense> ); } export default App;
import React from "react"; import HeavyComponent from "./HeavyComponent"; function App() { return ( <div> <h1>Main App</h1> <HeavyComponent /> </div> ); } export default App;
HeavyComponent 同步加載,增加了初始載入時間。
import React, { Suspense } from "react"; const HeavyComponent = React.lazy(() => import("./HeavyComponent")); function App() { return ( <div> <h1>Main App</h1> <Suspense fallback={<div>Loading Heavy Component...</div>}> <HeavyComponent /> </Suspense> </div> ); } export default App;
現在,HeavyComponent 僅在需要時加載,在加載過程中顯示回退。
import React, { Suspense } from "react"; const ComponentA = React.lazy(() => import("./ComponentA")); const ComponentB = React.lazy(() => import("./ComponentB")); function App() { return ( <div> <h1>Main App</h1> <Suspense fallback={<div>Loading Components...</div>}> <ComponentA /> <ComponentB /> </Suspense> </div> ); } export default App;
後備 UI 將顯示,直到兩個元件完成載入。
當與 Relay 或 React Query 等庫整合時,React Suspense 對於非同步資料擷取也很有用。
import React, { Suspense } from "react"; import { useQuery } from "react-query"; function DataComponent() { const { data } = useQuery("fetchData", fetchData); return <div>{data}</div>; } function App() { return ( <Suspense fallback={<div>Loading data...</div>}> <DataComponent /> </Suspense> ); } export default App;
如果在載入元件或資料的過程中發生錯誤,React Suspense 不提供內建的錯誤處理。為此,請使用錯誤邊界。
import React, { Suspense } from "react"; const LazyComponent = React.lazy(() => import("./LazyComponent")); function App() { return ( <Suspense fallback={<div>Loading...</div>}> <LazyComponent /> </Suspense> ); } export default App;
您可以嵌套多個 Suspense 元件,以對後備狀態進行精細控制。
import React from "react"; import HeavyComponent from "./HeavyComponent"; function App() { return ( <div> <h1>Main App</h1> <HeavyComponent /> </div> ); } export default App;
React Suspense 是一個用於管理 React 應用程式中非同步渲染的多功能工具。它簡化了載入狀態的處理,透過延遲載入增強了效能,並與程式碼分割和錯誤處理技術相結合,創造了更流暢的使用者體驗。
以上是如何在 React 中使用 Suspense 來改進非同步渲染的詳細內容。更多資訊請關注PHP中文網其他相關文章!