React 19 中的新功能

REACT 19 有哪些新功能？

1.反應(yīng)編譯器

有什么新內(nèi)容？

• React 自動(dòng)優(yōu)化重新渲染，無需手動(dòng)干預(yù)。

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

為什么使用 React 編譯器？

• 手動(dòng)優(yōu)化對于開發(fā)者來說是乏味的。

• React 現(xiàn)在可以自動(dòng)處理狀態(tài)更改和重新渲染邏輯。

好處

• React 決定重新渲染什么以及何時(shí)重新渲染。

• 減少開發(fā)人員的工作量。

• 更干凈、更簡單的代碼庫。

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

2. 服務(wù)器組件

有什么新內(nèi)容？

• 在服務(wù)器而不是客戶端上運(yùn)行的組件。

• 之前由 Next.js 首創(chuàng)（V13 中默認(rèn)）。

• 在 React 19 中，服務(wù)器組件是原生集成的。

好處

• SEO 友好：增強(qiáng)搜索引擎優(yōu)化。

• 性能提升：初始頁面加載速度更快。

• 服務(wù)器端執(zhí)行：高效處理 API 調(diào)用等任務(wù)。

如何使用服務(wù)器組件？

1. 客戶端（默認(rèn)）：所有 React 組件都在客戶端運(yùn)行。

2. 服務(wù)器端：添加“use Server”作為組件的第一行：
   

'use server';

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

要點(diǎn)

• 服務(wù)器組件不在客戶端上運(yùn)行。

• 與操作相結(jié)合，它們簡化了表單處理和 API 請求等任務(wù)。

• Next.js 用戶已經(jīng)可以利用服務(wù)器組件； React 19 直接將其引入 React。

3. 行動(dòng)

• React19 之前：手動(dòng)處理異步狀態(tài)。

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

• React19 之后：使用 useActionsState 進(jìn)行干凈的異步處理。

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

• 自動(dòng)處理加載、錯(cuò)誤和狀態(tài)更新。

4.新鉤子

USEACTIONSTATE：表單處理

自動(dòng)管理提交狀態(tài)和表單驗(yàn)證。

• 在 REACT19 之前：

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

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

• 反應(yīng) 19 之后：

useActionState 簡化了表單提交。

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

USEFORMSTATUS：跟蹤表單狀態(tài)

訪問表單狀態(tài)，例如待處理、成功或錯(cuò)誤。

const status = useFormStatus();

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

使用樂觀：樂觀的 UI 更新

簡化樂觀更新以獲得更好的用戶體驗(yàn)。

• 反應(yīng)19之前：

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

'use server';

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

• 反應(yīng)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 來簡化異步數(shù)據(jù)獲取和上下文消耗。

• REACT19 之前：使用 UseEffect

手動(dòng)處理異步狀態(tài)。

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

• REACT19 之后：USE() 鉤子

直接獲取異步數(shù)據(jù)并解析 Promise

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

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

優(yōu)點(diǎn)：

• 不需要 useEffect 或 useState。
• 更干凈、更具聲明性的代碼。
• 無縫處理 Promise。

6. 服務(wù)器組件

什么是服務(wù)器組件？

服務(wù)器組件在服務(wù)器上渲染并向客戶端發(fā)送輕量級結(jié)果，從而提高性能。

• REACT19 之前：傳統(tǒng)客戶端 - 側(cè)面渲染

你必須使用useEffect來獲取數(shù)據(jù)，SSR需要復(fù)雜的工具。

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

• REACT19 之后：服務(wù)器 - 端渲染

React 服務(wù)器組件無縫集成。

const status = useFormStatus();

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

優(yōu)點(diǎn)：

• 頁面加載速度更快（無需繁重的客戶端 JS）。
• 改進(jìn)了 SEO 并減小了捆綁包大小。

7. 強(qiáng)化資產(chǎn)加載

React19 改進(jìn)了圖像和腳本等資源在后臺的加載方式。

• 在 REACT19 之前：

您需要手動(dòng)配置。

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

• REACT19 之后：本機(jī)延遲加載

資產(chǎn)現(xiàn)在無需干預(yù)即可高效加載。

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

function handleClick() {
 addOptimisticItem(newItem);
}

優(yōu)點(diǎn)：

• 加載時(shí)間更快。
• 更好的用戶體驗(yàn)并減少延遲。

結(jié)論

React 19 帶來：

• 通過操作簡化異步狀態(tài)管理。
• 新鉤子，例如 useActionState，
• useFormStatus 和 UseOptimistic。
• use() 鉤子可輕松處理異步數(shù)據(jù)。
• 無縫服務(wù)器組件以獲得更好的性能。
• 更清晰的參考管理和增強(qiáng)的資源加載。

以上是反應(yīng)19的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！