資料結構
網路
關係型資料庫
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究React 19 - 特性與更新
ReactJS 是一個開源的 JavaScript 庫，用於構建動態的單頁面應用程式以及建立可複用的互動式 UI 元件。React 由 META（前身為 Facebook）開發和維護。ReactJS 可用於開發小型應用程式以及大型複雜應用程式。
目錄
React 19 的新特性是什麼？
React 在其最新的版本 React 19 中引入了各種新特性和改進，包括一個新的 React 編譯器。React 19 引入了 hooks，例如 useActionState hook 用於更好的狀態管理，ref 回撥的自動清理，以及併發渲染的增強，新的 React 編譯器最佳化程式碼以實現更快的執行。所有這些特性和改進都側重於提高效能和最佳化伺服器元件以實現更快的伺服器端渲染。這些改進使 React 19 成為構建更高效和可維護應用程式的重要更新。
ReactJS 的歷史
React 由 Meta 軟體工程師 Jordan Walke 建立，旨在解決新聞提要效能問題。在 **2011** 年，它被部署在 Facebook 的新聞提要上，並在 **2012** 年被整合到 Instagram 中。
以下是 React 主要事件的歷史時間軸
- **2013: ** React 釋出，並具有元件化架構和虛擬 DOM 等特性。
- **2015: ** 推出 React Native 用於構建移動應用程式。
- **2016: ** 釋出 React 15，並進行了新的更新以提高效能。
- **2017: ** 釋出 React 16，並採用了新的 React Fiber 架構以實現更好的渲染。
- **2019: ** 釋出 React 16.8，引入了有助於增強狀態管理的 hooks。
- **2020: ** 釋出 React 17，引入了將 JSX 轉換為 JavaScript 的新方法並提高了相容性。
- **2022: ** 釋出 React 18，並具有自動批處理、懸念、併發模式和伺服器端渲染 (SSR) 等新特性。
React 19 新特性
React 編譯器
React 19 中引入的 React 編譯器仍在開發中。但是，它已供使用者試用並提供反饋。它具有程式碼分析和最佳化等新特性。
React 編譯器將 React 程式碼轉換為 Javascript 程式碼，從而提高應用程式效能。它會自動記憶你的程式碼，因此無需使用諸如 useCallback、useMemo 和 memo 之類的記憶工具。它會在任何需要的地方應用記憶，而不是使用者手動在他們期望需要記憶的地方使用記憶，這使得程式碼更簡潔，並透過減少不必要的程式碼行提高了可讀性。現在，使用者無需擔心狀態更改和 UI，因為編譯器本身現在會處理這些問題。
React Actions
React 19 引入了一項新特性 **Actions**，它簡化了資料變異和狀態更新的處理。Actions 是在提交 表單 時呼叫的函式，從而簡化了表單處理。React 19 支援在轉換中使用非同步函式來自動處理掛起狀態、錯誤、表單處理和樂觀更新，這意味著使用者不再需要手動管理這些內容。**主要特性** 如下
- **掛起狀態：** Action 提供了一個在請求開始時啟動的掛起狀態，並在提交最終狀態更新時自動重置。
- **樂觀更新：** Action 支援新的 useOptimistic hook，允許開發人員在提交請求時向用戶顯示即時反饋。例如：當你傳送任何文字時，它會在傳送時顯示“正在傳送”的提示。
- **錯誤處理：** Action 提供錯誤處理，以便在請求失敗時顯示錯誤邊界，樂觀更新會自動恢復到其原始值。
- **表單處理：** action 和 formAction props 可用於表單元素以訪問 Action 功能。它有助於表單提交併在提交後自動重置表單。
React 伺服器元件
React 伺服器元件是 React 19 中引入的一項非常有用的特性。它在捆綁之前，在與客戶端應用程式或 SSR 伺服器分開的伺服器中提前渲染。它可以直接在伺服器上渲染 UI 元件。透過在伺服器上預渲染元件，RSC 提高了頁面載入時間。它使搜尋引擎能夠更輕鬆地索引和理解頁面的內容，從而改善 SEO。
- **無伺服器的伺服器元件：** 伺服器元件可以在構建時執行以訪問檔案系統或獲取靜態內容，因此不需要 Web 伺服器。
- **有伺服器的伺服器元件：** 伺服器元件也可以在頁面請求期間在 Web 伺服器上執行。這允許使用者訪問他們的資料而無需構建 API。它允許動態渲染，其中元件根據最新資料或使用者特定的請求進行渲染。
- **向伺服器元件新增互動性：** 伺服器元件處理渲染和資料獲取，並且不會發送到瀏覽器，因此可以使用“use client”指令將其與客戶端元件整合以新增互動性。
- **使用伺服器元件的非同步元件：** 伺服器元件允許使用者使用 async/await 語法編寫元件。當您“await”時，React 會掛起並等待 Promise 解析，然後恢復渲染。
React 19 Hooks
React useActionState HooksReact 19 引入了 useActionState hook，它允許使用者根據表單操作的結果更新狀態。它透過結合處理表單的簡單性和狀態管理的功能來簡化狀態管理和表單處理。它旨在使狀態管理更加明確、易讀，並減少表單中每個輸入欄位的複雜性。它接受兩個引數，如下所示
- **函式：** 它表示在提交表單時要呼叫的函式。在函式呼叫時，它接收先前的表單狀態作為其初始引數，然後是表單的常用引數。
- **initialState：** 它表示狀態的初始值。
- **currenstate** 在第一次渲染期間與 initialState 匹配，並且一旦呼叫 action，它就會與 action 返回的值匹配。
- **Action：** 它作為 action prop 傳遞給表單內的表單元件。
這是一個演示“useActionState”hook 的示例。以下示例執行登入操作。該 hook 返回一個包含三個元素的陣列，分別是 **loginError** 用於儲存登入期間發生的錯誤，**loginAction** 函式用於觸發登入過程，以及 **isLoginPending** 用於指示登入過程是否仍在進行中。
const [loginError, loginAction, isLoginPending] = useActionState(
async (previousState, info) => {
const error = await performLogin(info);
if (error) {
// Returning the error if the login fails.
return error;
}
// Returning null to indicate success.
return null;
},
null,
);
React useFormStatus Hooks
React 19 引入了 useFormStatus hook，它提供有關上次表單提交狀態的資訊。它允許子元件直接訪問父表單的狀態，而無需使用 Context 提供程式，從而減少了需要在中間的每個元件中傳遞表單狀態的需求。它可以防止表單在完成當前表單提交之前重新提交。
它不接受任何值作為引數，但返回一個具有以下屬性的狀態物件
- **Pending：** 它返回一個布林值，表示表單當前是否正在提交。
- **Data：** 它是一個物件，包含父表單正在提交的資料。如果當前沒有活動表單提交或沒有父表單，則返回 null。
- **Action：** 它表示對傳遞給父表單上 action prop 的函式的引用。
- 方法：它表示一個字串值，指示表單在提交時使用 GET 還是 POST HTTP 方法。預設情況下，表單使用 GET 方法。
以下是一個演示“useFormStatus”鉤子的示例。在下面的示例中，提交按鈕指示表單提交是否正在等待。在表單提交期間，按鈕將被停用並顯示“正在註冊”，否則顯示“註冊”。
import {useFormStatus} from 'react-dom';
function RegisterButton() {
const {pending} = useFormStatus();
return (
<button type="submit" disabled={pending}>
{pending ? 'Registering' : 'Register'}
</button>
);
}
React useOptimistic Hooks
React 19 引入了一個新的鉤子，useOptimistic 鉤子，它執行樂觀更新。它向用戶顯示立即的結果，而更新請求仍在進行中。它處理非同步資料變異期間的樂觀 UI 更新。它在非同步操作（如即時應用程式）中很有用，例如聊天應用程式，其中使用者傳送訊息，然後它立即顯示傳送，而不是讓使用者等待訊息傳遞。
React use API
React 19 引入了一個新的實驗性 API use。它是一個 React API，允許您讀取資源（如 Promise 或上下文）的值，並允許您非同步載入大量資源。它為諸如 useEffect()（用於資料獲取）和 useContext()（用於渲染上下文資料）等鉤子提供了一種替代方案。
它接受一個引數，即
- resource：它表示您要從中讀取值的的資料。它可以是 Promise 或上下文。
它返回一個單一值，即從 resource 讀取的 Promise 或上下文的解析值。
限制- 使用者只能在元件或鉤子內部呼叫 use API。
- 在伺服器元件中，建議使用 async 和 await 而不是 use API。這是因為 use 在資料解析後重新渲染元件，而 async 和 await 從 await 被呼叫的位置開始渲染。
React 19 改進
使用 ref 作為 Prop
在 React 19 中，使用者可以訪問 ref 作為函式元件的 prop。透過此改進，它取代了使用 forwardref 的需要，並且將在 React 的未來版本中棄用。
forwardRef 允許父元件將 ref 傳遞給子元件，但現在我們可以將 ref 作為 prop 傳遞，這使得 forwardRef 不再需要，從而使程式碼更易於維護並提高程式碼的可讀性。
水合錯誤的差異
React 19 改進了水合錯誤的錯誤報告。早些時候，它會報告錯誤，但沒有任何關於不匹配的資訊。現在，在 React 19 中，它會顯示一條關於不匹配的單一訊息。
使用 <Context> 作為提供者
React 19 允許您使用 <Context> 作為提供者，而不是 <Context.Provider>。在未來的版本中，<Context.Provider> 將被棄用。
const ThemeContext = createContext('');
function App({children}) {
return (
<ThemeContext value="dark">
{children}
</ThemeContext>
);
}
Ref 的清理函式
React 19 引入了一項新功能，即從 ref 回撥中返回一個清理函式。它在 ref 內定義清理函式。此功能允許定義一個清理函式，該函式將在不再需要 ref 時自動呼叫，例如當 ref 更改或元件解除安裝時。
它簡化了資源管理，因為與 ref 相關的必要清理會自動發生。它防止了記憶體洩漏的可能性，並確保透過適當的清理使程式碼易於維護。
支援
文件元資料React 19 引入了一種簡化的方法來管理文件元資料標籤，例如 <title>、<meta> 和 <link>。早些時候，這些標籤需要手動管理或由 react-helmet 等庫管理，但 React 19 提供了一種本地方法來直接在 React 元件中處理這些元素。在渲染時，React 會自動將元資料標籤提升到文件的 <head> 部分。
React 19 引入了一個專用的元件 DocumentHead，允許宣告式地定義和更新文件元資料。它簡化了 SEO 管理，因為它允許對標題、描述和元標籤進行動態的、元件級別的控制。它確保搜尋引擎始終接收最新更新和最準確的元資料，從而提高網頁的可見性和排名。
樣式表React 19 提供了樣式表的輕鬆管理，無論是外部的（<link rel="stylesheet" href="...">）還是內聯的（<style>...</style>），因為它提供了內建支援，確保它們以正確指定的優先順序順序插入 DOM。這確保外部樣式表在顯示相關內容之前載入。
在伺服器端渲染期間，React 在 head 標籤中包含樣式表，這確保瀏覽器在樣式表完全載入之前等待顯示內容。在客戶端渲染期間，React 在提交之前等待新渲染的樣式表載入。這允許樣式表與元件共存，從而降低複雜性，並且僅載入必要的樣式。
React 19 對樣式表支援降低了複雜性，因為它在內部管理複雜性，減少了手動工作，有助於最佳化渲染，並允許宣告式樣式。
非同步指令碼React 19 引入了非同步指令碼管理的改進。與正常的 HTML 或延遲指令碼（按文件順序載入）不同，非同步指令碼以任意順序載入，這使得元件樹內的渲染具有挑戰性。主要改進如下所示
- 靈活的放置：React 19 允許您在元件樹中的任何位置渲染非同步指令碼，即使在依賴它們的元件中，也無需手動管理指令碼重新定位和重複資料刪除。
- 自動重複資料刪除：在 React 19 中，即使它從多個元件中渲染，React 也確保非同步指令碼僅載入和執行一次，減少冗餘並提高效率，避免多次載入指令碼。
- 最佳化的 SSR 載入：非同步指令碼在“伺服器端渲染”期間包含在 head 標籤中，但它在關鍵資源（如樣式表、字型和影像預載入）之後載入，優先考慮基本資源，從而提高整體渲染效能。
React 19 引入了對預載入資源的內建支援，以最佳化效能。React 19 中包含的新 API 向瀏覽器提供有關其所需資源的早期資訊，它顯著提高了初始頁面載入和客戶端更新的速度。主要改進如下所示
- 更快的頁面載入：預載入其他資源（如字型）並將其與樣式表分離，可以提高初始頁面載入的速度和效能。
- 更快的客戶端更新：API 預取預期導航的資源，並在點選或懸停時預載入，以實現更快的客戶端更新。
結論
在本文中，我們討論了 React 19 的功能和更新。我們討論了 ReactJS 及其歷史，React 19 中的各種新功能，包括全新的 React 編譯器、React Actions、React 伺服器元件、React use API 和 React 19 鉤子，例如 useActionState 鉤子、useFormStatus 鉤子和 useOptimistic 鉤子。我們還討論了在此版本中進行的各種改進，例如將 ref 用作 prop、ref 的清理函式和水合錯誤的差異。所有這些新功能和改進都有助於程式碼最佳化、高效效能以及建立對 SEO 友好的 Web 應用程式。
194 次瀏覽
