反應19

React 19 中的新功能

REACT 19 有哪些新功能？

1.反應編譯器

有什麼新內容？

• React 自動最佳化重新渲染，無需手動幹預。

• 不再需要：useMemo()、useCallBack()、React.memo

為什麼要使用 React 編譯器？

• 手動最佳化對於開發者來說是乏味的。

• React 現在可以自動處理狀態變更和重新渲染邏輯。

好處

• React 決定重新渲染什麼以及何時重新渲染。

• 減少開發人員的工作量。

• 更乾淨、更簡單的程式碼庫。

• 目前正在為 Instagram 提供支援。

2. 伺服器元件

有什麼新內容？

• 在伺服器而不是客戶端上執行的元件。

• 之前由 Next.js 首創（V13 中預設）。

• 在 React 19 中，伺服器元件是原生整合的。

好處

• SEO 友善：增強搜尋引擎優化。

• 效能提升：初始頁面載入速度更快。

• 伺服器端執行：高效率處理 API 呼叫等任務。

如何使用伺服器元件？

1. 客戶端（預設）：所有 React 元件都在客戶端運作。

2. 伺服器端：新增「use Server」作為元件的第一行：
   

'use server';

export default async function requestUsername(formData) {
  const username = formData.get('username');
  return canRequest(username) ? 'successful' : 'failed';
}

要點

• 伺服器元件不在客戶端上運作。

• 與操作結合，它們簡化了表單處理和 API 請求等任務。

• Next.js 使用者已經可以利用伺服器元件； React 19 直接將其引入 React。

3. 行動

• React19 之前：手動處理非同步狀態。

function handleSubmit() {
  setloading (true);
  try {
      const result = await saveData();
      setData(result);
      } 
  catch (err) 
     {
     setError(err);
     }
  finally
     {
     setloading(failse);
     } 
}

• React19 之後：使用 useActionsState 進行乾淨的非同步處理。

const [state, formAction] = useActionState(async (prevState, formData) => {
   const result = await saveData(formData);
   return result;
   }, null);

• 自動處理載入、錯誤和狀態更新。

4.新鉤子

USEACTIONSTATE：表單處理

自動管理提交狀態和表單驗證。

• 在 REACT19 之前：

const [isSubmitting, setIsSubmitting] = useState(false);

async function handleSubmit() {
  setIsSubmitting(true);
  try {
      await submitForm();
      }
  finally 
      {
      setIsSubmitting(false);
      }
}

• 反應 19 之後：

useActionState 簡化了表單提交。

const [state, formAction] = useActionState(async (prevState, formData) => {
    return await submitForm(formData);
});

USEFORMSTATUS：追蹤表單狀態

存取表單狀態，例如待處理、成功或錯誤。

const status = useFormStatus();

<button type="submit" disabled status.pending>
  { status.pending ? "Submitting..." : "Submit" } 
</button>

使用樂觀：樂觀的 UI 更新

簡化樂觀更新以獲得更好的使用者體驗。

• 反應19之前：

您樂觀地更新了 UI，他們處理了恢復。

'use server';

export default async function requestUsername(formData) {
  const username = formData.get('username');
  return canRequest(username) ? 'successful' : 'failed';
}

• 反應19之後：

useOptimistic 使其具有宣告性。

function handleSubmit() {
  setloading (true);
  try {
      const result = await saveData();
      setData(result);
      } 
  catch (err) 
     {
     setError(err);
     }
  finally
     {
     setloading(failse);
     } 
}

5. USE() 鉤子

use() 是什麼？

use() 鉤子透過直接處理 Promise 來簡化非同步資料擷取和上下文消耗。

• REACT19 之前：使用 UseEffect

手動處理非同步狀態。

const [state, formAction] = useActionState(async (prevState, formData) => {
   const result = await saveData(formData);
   return result;
   }, null);

• REACT19 之後：USE() 鉤子

直接取得非同步資料並解析 Promise

const [isSubmitting, setIsSubmitting] = useState(false);

async function handleSubmit() {
  setIsSubmitting(true);
  try {
      await submitForm();
      }
  finally 
      {
      setIsSubmitting(false);
      }
}

優點：

• 不需要 useEffect 或 useState。
• 更乾淨、更具宣告性的程式碼。
• 無縫處理 Promise。

6. 伺服器元件

什麼是伺服器元件？

伺服器元件在伺服器上渲染並向客戶端發送輕量級結果，從而提高效能。

• REACT19 之前：傳統客戶端 - 側面渲染

你必須使用useEffect來取得數據，SSR需要複雜的工具。

const [state, formAction] = useActionState(async (prevState, formData) => {
    return await submitForm(formData);
});

• REACT19 之後：伺服器 - 端渲染

React 伺服器元件無縫整合。

const status = useFormStatus();

<button type="submit" disabled status.pending>
  { status.pending ? "Submitting..." : "Submit" } 
</button>

優點：

• 頁面載入速度更快（無需繁重的客戶端 JS）。
• 改進了 SEO 並減少了捆綁包大小。

7. 強化資產加載

React19 改進了映像和腳本等資源在後台的載入方式。

• 在 REACT19 之前：

您需要手動設定。

function handleClick() {
 setItems([...items, newItem]);
 saveItem(newItem).catch(() => setItems(items)); // Revert on error
}

• REACT19 之後：本機延遲載入

資產現在無需幹預即可高效加載。

const [optimisticItems, addOptimisticItem] = useOptimistic(items);

function handleClick() {
 addOptimisticItem(newItem);
}

優點：

• 載入時間更快。
• 更好的使用者體驗並減少延遲。

結論

React 19 帶來：

• 透過操作簡化非同步狀態管理。
• 新鉤子，例如 useActionState，
• useFormStatus 和 UseOptimistic。
• use() 鉤子可輕鬆處理非同步資料。
• 無縫伺服器組件以獲得更好的效能。
• 更清晰的參考管理和增強的資源載入。

以上是反應19的詳細內容。更多資訊請關注PHP中文網其他相關文章！