我對 use() 鉤子的思考——深入探討 React 的最新實驗功能-js教程-PHP中文網

My thoughts on the use() hook — A deep dive into React s latest experimental feature

React 19 已經發布了，它帶來了許多新功能，例如伺服器元件、指令（使用客戶端和使用伺服器）、新鉤子（例如useOptimistic()）、 useFormStatus () 和實驗性的use() 鉤子，這就是我今天要討論的內容。

什麼是 Use() 掛鉤？

use() 鉤子是一項新功能，可讓您直接在元件中處理 Promise。它本質上是一種在元件內部解開 Promise 並更簡潔地處理非同步資料的方法。

import { use } from 'react';
// Example async function
async function fetchUserDetails(id) {
const response = await fetch(`localhost:3000/api/users/${id}`);
return response.json();
}
function UserProfile({ id }) {
// use() will suspend the component while the promise resolves
const user = use(fetchUser(id));
return <div>Hello, {user.name}!</div>;
}

登入後複製

use() 鉤子代表了 React 處理非同步資料方式的重大轉變，使其更加直觀並降低了管理非同步狀態的複雜性。

use() 鉤子的主要特徵：

Promise 處理：use() 可以處理組件中任何層級的 Promise。它會在等待 Promise 解決時自動掛起元件，並與 React 的 Suspense 邊界配合使用。
錯誤處理較直觀:

try {
const data = use(riskyOperation());
return <Success data={data} />;
} catch (error) {
return <ErrorBoundary error={error} />;
}

登入後複製

資源快取：React 自動快取 use() 的結果 — 不會不必要地重新取得相同的 Promise，從而以更少的程式碼行優化效能。

比較 use() 與 useState() useEffect() 模式

假設我們有一個 API 取得函數來取得使用者帖子，我們需要在應用程式中全域存取帖子。

// Global API fetch function
async function fetchUserPosts(userId: string) {
const response = await fetch(`/api/users/${userId}/posts`);
return response.json();
}

登入後複製

以下是如何在使用者設定檔元件中取得帖子，並使用 useState 掛鉤和 useEffect 掛鉤將其資料作為帖子狀態傳遞，同時必須具有我們習慣的載入狀態和錯誤狀態。

// Example 1: Basic Data Fetching
// Traditional Approach using useState and useEffect
function UserProfilePost({ postId }: { postId: string }) {
const [post, setPost] = useState<any>(null);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState<Error | null>(null);

useEffect(() => {
setIsLoading(true);
setError(null);
fetchUserPosts(userId)
.then(data => {
setPost(data);
})
.catch(err => {
setError(err);
})
.finally(() => {
setIsLoading(false);
});
}, [userId]);

if (isLoading) return <div><Loading /></div>;
if (error) return <div><Error /></div>;
if (!post) return null;

return (
<div>
<h1>{post.title}</h1>
<p>{post.author}</p>
</div>
);
}

登入後複製

以下是我們如何使用use() 鉤子以更少的程式碼行完成相同的事情，消除了使用useState 和useEffect 鉤子來獲取資料、載入狀態和錯誤狀態的需要，同時仍然實作資源快取以改進表演。

// Modern Approach with use()
function UserProfilePost{ postId }: { postId: string }) {
const post= use(fetchUserPost(postId));
return (
<Suspense fallback=<Loading />>
<div>
<ErrorBoundary fallback=<Error />>
<h1>{post.title}</h1>
<p>{post.author}</p>
</ErrorBoundary>
</div>
</Suspense>
);
}

登入後複製

現在讓我們來看另一個稍微複雜一點的範例。

// Form Submission with Loading States
// Traditional Approach using useState and useEffect
function SubmitFormTraditional() {
const [isSubmitting, setIsSubmitting] = useState(false);
const [error, setError] = useState<Error | null>(null);
const [success, setSuccess] = useState(false);

async function handleSubmit(formData: FormData) {
setIsSubmitting(true);
setError(null);
setSuccess(false);

try {
await fetch('localhost:3000/api/submit', {
method: 'POST',
body: formData
});
setSuccess(true);
} catch (err: any) {
setError(err);
} finally {
setIsSubmitting(false);
}
}

return (
<form onSubmit={e => {
e.preventDefault();
handleSubmit(new FormData(e.currentTarget));
}}>
{/* Form fields */}
<button disabled={isSubmitting}>
{isSubmitting ? 'Submitting…' : 'Submit'}
</button>
{error && <div><Error /></div>}
{success && <div><Success /></div>}
</form>
);
}

登入後複製

以下是我們如何使用 use() 鉤子做同樣的事情。

import { use } from 'react';
// Example async function
async function fetchUserDetails(id) {
const response = await fetch(`localhost:3000/api/users/${id}`);
return response.json();
}
function UserProfile({ id }) {
// use() will suspend the component while the promise resolves
const user = use(fetchUser(id));
return <div>Hello, {user.name}!</div>;
}

登入後複製

use() 鉤子方法的主要區別和優點：

1. 簡化的程式碼結構

還記得所有那些載入、錯誤和資料的狀態變數嗎？使用 use() 後，它們就消失了。您的組件變得更加簡潔和直接。這不僅僅是編寫更少的程式碼，而是編寫更易於維護、可讀的程式碼，以更好地表達您的意圖。 use() 鉤子消除了手動編排載入狀態和錯誤處理的需要，減少了管理非同步操作的認知開銷。

2.更好的錯誤處理

分散的 try-catch 區塊和手動錯誤狀態管理的日子已經一去不復返了。使用 use()，錯誤處理透過錯誤邊界變得聲明性：

try {
const data = use(riskyOperation());
return <Success data={data} />;
} catch (error) {
return <ErrorBoundary error={error} />;
}

登入後複製

此方法可確保整個應用程式中錯誤處理的一致性，並使錯誤復原更加可預測和可管理。

3. 自動載入狀態

還記得玩弄載入標誌嗎？ use() 鉤子與 Suspense 結合，自動處理這個問題：

// Global API fetch function
async function fetchUserPosts(userId: string) {
const response = await fetch(`/api/users/${userId}/posts`);
return response.json();
}

登入後複製

這種載入狀態的聲明性方法可以更輕鬆地在應用程式中建立一致的載入體驗。