Submit

新 API ：useFormStatus 重要性：★

參考信息：useFormStatus 文檔

此 API 與 useFormState 聯(lián)動使用，現(xiàn)代開發(fā)更多使用高級表單庫，故此特性不重要。

新 API ：useOptimistic 重要性：★★

參考信息：useOptimistic 文檔

通過此 API 派生其他的 state ，從而在提交動作時，立即樂觀更新此值來優(yōu)化用戶視覺上的交互體驗。

要實現(xiàn)樂觀更新，必然要編寫許多額外邏輯，同時現(xiàn)代請求庫（如 react-query 、SWR 等）早已提供了樂觀更新的功能。然而更多時候，我們沒有精力和工時來提升用戶體驗，過度提升體驗反而會造成更多冗余的樂觀更新邏輯導(dǎo)致后續(xù)維護困難，展示 loading 已經(jīng)足夠，故此 API 不重要，若不是有心為之，則很難用到。

4. Web 組件

Web 組件允許你使用原生 HTML、CSS 和 JavaScript 創(chuàng)建自定義組件，并將它們無縫地整合到你的 Web 應(yīng)用程序中，就像它們是標(biāo)準(zhǔn) HTML 標(biāo)簽一樣。

之前，在 React 中集成 Web 組件并不簡單。通常情況下，要么需要將 Web 組件轉(zhuǎn)換為 React 組件，要么安裝額外的包并編寫額外的代碼，以使 Web 組件與 React 協(xié)同工作。

React 19改進了對Web組件的支持，使得在React項目中整合使用Web標(biāo)準(zhǔn)組件變得更加無縫。這使得開發(fā)者可以利用廣泛的Web組件生態(tài)系統(tǒng)，而不必為了在React中使用它們而寫大量的封裝代碼。

import React from 'react';

function CustomButtonComponent() {

return (

<>

Click Me!

);

}

export default CustomButtonComponent;

在這個示例中，是一個自定義的Web組件，它可以直接在React中使用，無需任何特別的封裝或橋接代碼。這種整合提高了代碼的復(fù)用性，并允許React開發(fā)者利用現(xiàn)有的Web組件庫。

可能有的同學(xué)會說，這一個自定義的標(biāo)簽有什么用呢？回答是：非常有用。

因為在React 19的現(xiàn)代Web框架中使用Web組件時，并不是一個普通的HTML標(biāo)簽。

它實際上是一個Web組件——這是一種使用自定義元素、Shadow DOM、HTML模板封裝好的可重用組件。 當(dāng)你在Web應(yīng)用中使用像這樣的自定義元素時，瀏覽器會渲染出這個元素的定義所包含的所有樣式和行為。

這些自定義元素的行為和外觀完全由你定義的Web組件的JavaScript和CSS控制。以下假設(shè)定義了一個自定義的web組件：

class MyButton extends HTMLElement {

constructor() {

super(); // 調(diào)用父類的constructor

const shadowRoot = this.attachShadow({mode: 'open'});

shadowRoot.innerHTML = `

`;

}

}

// 定義新的自定義元素

customElements.define('my-button', MyButton);

5. 文檔元數(shù)據(jù)?

對元數(shù)據(jù)的管理變得更加簡單。React 19引入了可以直接在React組件中使用HTML元數(shù)據(jù)標(biāo)簽的能力，這樣開發(fā)者就不再需要依賴如react-helmet這樣的庫來動態(tài)更新文檔頭部信息。

1）基本元數(shù)據(jù)標(biāo)簽

考慮到 SSR 的完備性，使用第三方庫插入元信息仍然更好，所以此特性不重要。

之前：

import React, { useEffect } from 'react';

const HeadDocument = ({ title }) => {

useEffect(() => {

document.title = title;

const metaDescriptionTag = document.querySelector('meta[name="description"]');

if (metaDescriptionTag) {

metaDescriptionTag.setAttribute('content', 'New description');

}

}, [title]);

return null;

};

export default HeadDocument;

?現(xiàn)在：在 React 中以前是不可能的。唯一的方法是使用像 react-helmet 這樣的包。

function HomePage() {

return (

<>

歡迎來到我的網(wǎng)站

這里有豐富的資源和信息。

);

}

在這個示例中，