Raft算法：保障分布式系統(tǒng)共識(shí)的穩(wěn)健之道
1. 什么是Raft算法？Raft 是英文”Reliable、Replicated、Redundant、And Fault-Tolerant”（“可靠、可復(fù)制、可冗余、可容錯(cuò)”）的首字母縮寫。Raft算法是一種用于在分布式系統(tǒng)
早在數(shù)月前，React 團(tuán)隊(duì)便預(yù)告了 React 19 的積極開發(fā)，并預(yù)計(jì)上半年發(fā)布。 4 月 25 日，React 終于發(fā)布了 v19 測試版。該版本主要面向各大庫，以確保它們與 React 19 的兼容性。因此，建議開發(fā)者先升級(jí)至最新的穩(wěn)定版 18.3.0，靜待 React 19 的正式版發(fā)布。
React 19 帶來了諸多新特性和改進(jìn)，不僅提升了開發(fā)者的使用體驗(yàn)，還進(jìn)一步優(yōu)化了 React 應(yīng)用的性能。為了讓開發(fā)者能夠平穩(wěn)過渡到 React 19，React 團(tuán)隊(duì)特意準(zhǔn)備了一份詳盡的升級(jí)指南，詳細(xì)列出了升級(jí)步驟和可能遇到的重大變化。
接下來，本文將剖析 React 18.3 與 React 19 的更新內(nèi)容，并探索 React 19 的升級(jí)指南，助力更好地?fù)肀н@一重大更新！
React 18.3 相對(duì)于 18.2 增加了對(duì)廢棄 API 的警告以及其他為 React 19 所需的更改。
在React應(yīng)用中，執(zhí)行數(shù)據(jù)變更并據(jù)此更新狀態(tài)是一個(gè)常見的需求。比如，用戶提交表單以更改姓名時(shí)，我們會(huì)發(fā)起API請求并處理其響應(yīng)。以往，我們不得不手動(dòng)管理掛起狀態(tài)、錯(cuò)誤處理、樂觀更新以及順序請求等邏輯。
例如，可以使用useState來處理掛起和錯(cuò)誤狀態(tài)：
function UpdateName({}) { const [name, setName] = useState(""); const [error, setError] = useState(null); const [isPending, setIsPending] = useState(false); const handleSubmit = async () => { setIsPending(true); const error = await updateName(name); setIsPending(false); if (error) { setError(error); return; } redirect("/path"); }; return ( <div> <input value={name} onChange={(event) => setName(event.target.value)} /> <button onClick={handleSubmit} disabled={isPending}> Update </button> {error && <p>{error}</p>} </div> );}在 React 19 中增加了對(duì)在轉(zhuǎn)換中使用異步函數(shù)的支持，以自動(dòng)處理掛起狀態(tài)、錯(cuò)誤、表單和樂觀更新。
例如，可以使用useTransition來自動(dòng)處理掛起狀態(tài)：
function UpdateName({}) { const [name, setName] = useState(""); const [error, setError] = useState(null); const [isPending, startTransition] = useTransition(); const handleSubmit = async () => { startTransition(async () => { const error = await updateName(name); if (error) { setError(error); return; } redirect("/path"); }) }; return ( <div> <input value={name} onChange={(event) => setName(event.target.value)} /> <button onClick={handleSubmit} disabled={isPending}> Update </button> {error && <p>{error}</p>} </div> );}異步轉(zhuǎn)換會(huì)立刻將isPending狀態(tài)設(shè)為true，發(fā)起異步請求，并在轉(zhuǎn)換完成后將isPending設(shè)置為false。這樣可以確保數(shù)據(jù)變化時(shí)，UI 仍然保持響應(yīng)和交互性。
在 Actions 功能的基礎(chǔ)上，React 19 還推出了useOptimistic Hook 來簡化樂觀更新的管理，以及 React.useActionState Hook來處理 Actions 的常見場景。同時(shí)，在 react-dom 中，新增了<form> Actions 來自動(dòng)管理表單操作，并提供了useFormStatus 來支持表單中 Actions 的常見需求。
在 React 19 中，上面的例子可以簡化為：
function ChangeName({ name, setName }) { const [error, submitAction, isPending] = useActionState( async (previousState, formData) => { const error = await updateName(formData.get("name")); if (error) { return error; } redirect("/path"); } ); return ( <form action={submitAction}> <input type="text" name="name" /> <button type="submit" disabled={isPending}>Update</button> {error && <p>{error}</p>} </form> );}下面就來看看這些新的 Actions 功能的作用和使用方法。
為了讓常見的 Action 用例更加簡便，因此添加了一個(gè)名為useActionState的新 Hook：
const [error, submitAction, isPending] = useActionState(async (previousState, newName) => { const error = await updateName(newName); if (error) { // 可以返回Action的任何結(jié)果，這里只返回錯(cuò)誤信息。 return error; } // 處理成功的情況 });useActionState接受一個(gè)函數(shù)（即“Action”），并返回一個(gè)可調(diào)用的包裝 Action。這之所以能夠工作是因?yàn)锳ctions是可組合的。當(dāng)調(diào)用包裝后的Action時(shí)，useActionState將返回Action的最后一個(gè)結(jié)果作為數(shù)據(jù)，并將Action的掛起狀態(tài)作為pending返回。
在 React 19 中，Actions 與 react-dom 的新 <form> 特性進(jìn)行了深度整合。現(xiàn)在，可以將函數(shù)作為<form>、<input>和<button>元素的action和formAction屬性，以便自動(dòng)使用 Actions 提交表單：
<form action={actionFunction}>當(dāng)<form>的action成功執(zhí)行時(shí)，React會(huì)自動(dòng)為不受控組件重置表單狀態(tài)。如果需要手動(dòng)重置<form>，React DOM API 提供了全新的requestFormReset方法。
在構(gòu)建設(shè)計(jì)系統(tǒng)時(shí)，經(jīng)常需要?jiǎng)?chuàng)建一些設(shè)計(jì)組件，這些組件需要能夠訪問其所在表單的狀態(tài)信息，而不必通過層層傳遞props來實(shí)現(xiàn)。雖然通過Context也可以實(shí)現(xiàn)這一功能，但為了簡化常見場景下的使用，React 19 引入了一個(gè)新的 Hook useFormStatus：
import { useFormStatus } from 'react-dom'; function DesignButton() { const { pending } = useFormStatus(); return <button type="submit" disabled={pending} />; }useFormStatus可以讀取父級(jí)<form>的狀態(tài)，就像該表單是一個(gè)Contextprovider 一樣。
在數(shù)據(jù)變更操作中，一種常見的 UI 模式是在異步請求執(zhí)行期間樂觀地顯示預(yù)期的最終狀態(tài)。React 19 引入了新的useOptimistic Hook，以簡化這一流程：
function ChangeName({currentName, onUpdateName}) { const [optimisticName, setOptimisticName] = useOptimistic(currentName); const submitAction = async formData => { const newName = formData.get("name"); setOptimisticName(newName); const updatedName = await updateName(newName); onUpdateName(updatedName); }; return ( <form action={submitAction}> <p>Your name is: {optimisticName}</p> <p> <label>Change Name:</label> <input type="text" name="name" disabled={currentName !== optimisticName} /> </p> </form> );}在這個(gè)例子中，useOptimistic Hook 允許在updateName請求還在進(jìn)行時(shí)，立即將輸入框的值（即newName）設(shè)置為optimisticName，從而樂觀地更新UI。如果更新成功，則通過onUpdateName回調(diào)函數(shù)來確認(rèn)狀態(tài)的更改；如果更新失敗或發(fā)生錯(cuò)誤，可以通過setOptimisticName回滾到原始狀態(tài)currentName。
在React 19中，引入了一個(gè)全新的API——use，它允許在組件渲染時(shí)直接讀取資源。
舉個(gè)例子，可以使用use來讀取一個(gè)Promise對(duì)象，而React將會(huì)自動(dòng)掛起（Suspend）組件的渲染，直到該P(yáng)romise解析完成：
import { use } from 'react'; function Comments({ commentsPromise }) { // 使用use讀取Promise，React會(huì)在Promise解析前掛起組件渲染 const comments = use(commentsPromise); return ( <div> {comments.map((comment) => ( <p key={comment.id}>{comment.text}</p> ))} </div> ); } function Page({ commentsPromise }) { // 當(dāng)Comments組件因use掛起時(shí)，這里會(huì)顯示Suspense的fallback內(nèi)容 return ( <Suspense fallback={<div>加載中...</div>}> <Comments commentsPromise={commentsPromise} /> </Suspense> ); }同樣可以使用use來讀取上下文（Context），從而實(shí)現(xiàn)在特定條件下（例如早期返回之后）按需讀取上下文數(shù)據(jù)。
早期返回指的是在函數(shù)或方法中的某個(gè)點(diǎn)提前結(jié)束執(zhí)行，并返回結(jié)果或退出，而不是繼續(xù)執(zhí)行剩余的代碼。在函數(shù)內(nèi)部，根據(jù)某些條件或邏輯，你可能會(huì)決定不需要繼續(xù)執(zhí)行后續(xù)的代碼，此時(shí)可以使用return語句來立即退出函數(shù)。
import {use} from 'react';import ThemeContext from './ThemeContext'function Heading({children}) { if (children == null) { return null; } // 使用 useContext 在這里不會(huì)生效 ，因?yàn)榇嬖谠缙诜祷亍? const theme = use(ThemeContext); return ( <h1 style={{color: theme.color}}> {children} </h1> );}use API 的調(diào)用僅限于渲染階段，與 React 的 Hook 類似。然而，與 Hook 不同的是，use API 允許在條件語句中靈活調(diào)用。展望未來，React 團(tuán)隊(duì)計(jì)劃進(jìn)一步擴(kuò)展 use API 的功能，提供更多在渲染時(shí)消費(fèi)資源的方式。
服務(wù)器組件是一種創(chuàng)新性的技術(shù)，它允許在打包前，在獨(dú)立于客戶端應(yīng)用程序或服務(wù)器端渲染（SSR）服務(wù)器的環(huán)境中預(yù)先渲染組件。這個(gè)獨(dú)立的環(huán)境即為React服務(wù)器組件中的“服務(wù)器”。服務(wù)器組件有兩種運(yùn)行模式：一種是在構(gòu)建時(shí)（例如在持續(xù)集成服務(wù)器上）運(yùn)行一次；另一種是針對(duì)每個(gè)請求，通過 Web 服務(wù)器進(jìn)行實(shí)時(shí)運(yùn)行。
React 19 全面集成了來自 Canary 頻道的所有服務(wù)器組件特性。這意味著，那些帶有服務(wù)器組件的庫現(xiàn)在可以將 React 19 作為對(duì)等依賴項(xiàng)進(jìn)行目標(biāo)定位，并通過 react-server 導(dǎo)出條件，為支持全棧 React 架構(gòu)的框架提供強(qiáng)大的支持。
服務(wù)器動(dòng)作是一項(xiàng)強(qiáng)大功能，它允許客戶端組件調(diào)用并執(zhí)行在服務(wù)端的異步函數(shù)。
通過“use server”指令定義服務(wù)器操作后，框架將智能地創(chuàng)建一個(gè)指向服務(wù)端函數(shù)的引用，并安全地將該引用傳遞給客戶端組件。當(dāng)客戶端組件需要調(diào)用這個(gè)函數(shù)時(shí)，React 會(huì)負(fù)責(zé)向服務(wù)器發(fā)送請求，執(zhí)行相應(yīng)的函數(shù)，并將結(jié)果返回給客戶端。
服務(wù)器操作的創(chuàng)建非常靈活，既可以在服務(wù)器組件內(nèi)部創(chuàng)建，并作為屬性傳遞給客戶端組件使用；也可以直接在客戶端組件中導(dǎo)入并調(diào)用。這種設(shè)計(jì)使得服務(wù)器操作能夠無縫集成到應(yīng)用中，實(shí)現(xiàn)前后端數(shù)據(jù)的流暢交互。
從 React 19 開始，可以將 ref 作為函數(shù)組件的參數(shù)進(jìn)行訪問：
function MyInput({placeholder, ref}) { return <input placeholder={placeholder} ref={ref} /> } //... <MyInput ref={ref} />新的函數(shù)組件將不再需要 forwardRef，React 團(tuán)隊(duì)將會(huì)發(fā)布一個(gè)代碼轉(zhuǎn)換工具來自動(dòng)更新組件，以使用新的 ref 屬性。在未來的版本中，將棄用并移除 forwardRef。
React 19 在 react-dom 中對(duì)水合錯(cuò)誤的報(bào)告進(jìn)行了優(yōu)化。過去，在開發(fā)模式下遇到水合不匹配時(shí)，系統(tǒng)往往只記錄多個(gè)錯(cuò)誤，而缺乏關(guān)于不匹配內(nèi)容的具體信息。現(xiàn)在，引入了 diff 功能，使得客戶端渲染與服務(wù)端渲染內(nèi)容之間的差異一目了然。這一改進(jìn)不僅提升了錯(cuò)誤報(bào)告的清晰度，更有助于開發(fā)者迅速定位并修復(fù)水合相關(guān)問題，從而大幅提升開發(fā)效率。
現(xiàn)在只會(huì)記錄一條包含不匹配內(nèi)容差異的消息：
React 19 允許直接將 <Context> 用作提供者，而無需使用傳統(tǒng)的 <Context.Provider> 寫法：
const ThemeContext = createContext(''); function App({children}) { return ( <ThemeContext value="dark"> {children} </ThemeContext> ); }這種新的語法更加簡潔直觀。為了方便開發(fā)者升級(jí)現(xiàn)有代碼，React 團(tuán)隊(duì)將發(fā)布一個(gè)代碼轉(zhuǎn)換工具，能夠自動(dòng)將現(xiàn)有的 <Context.Provider> 轉(zhuǎn)換為新的 <Context> 提供者。未來版本中，將逐步棄用 <Context.Provider>，以推動(dòng) React 社區(qū)向更加簡化的語法過渡。
現(xiàn)在支持從 ref 回調(diào)函數(shù)中返回一個(gè)清理函數(shù)：
<input ref={(ref) => { // 創(chuàng)建 ref // 新增：返回一個(gè)清理函數(shù)，當(dāng)元素從 DOM 中移除時(shí)重置 ref。 return () => { // ref 的清理工作 }; }} />當(dāng)組件卸載時(shí)，React 將調(diào)用從 ref 回調(diào)函數(shù)中返回的清理函數(shù)。這適用于 DOM refs、類組件的 refs 以及 useImperativeHandle。
由于引入了 ref 清理函數(shù)的機(jī)制，現(xiàn)在 TypeScript 將拒絕從 ref 回調(diào)函數(shù)中返回除清理函數(shù)以外的任何內(nèi)容。為了避免這個(gè)問題，我們通常建議避免使用隱式返回，比如將賦值操作放在花括號(hào)中，如下所示：
<div ref={current => (instance = current)} /><div ref={current => { instance = current; }} />這種改變是因?yàn)?TypeScript 無法判斷原始代碼中返回的是否應(yīng)該是清理函數(shù)，還是無意中的隱式返回值。通過將賦值操作明確地包裹在花括號(hào)中，確保了 ref 回調(diào)中不會(huì)意外地返回任何值，除非有意為之。
為了自動(dòng)化這種模式的轉(zhuǎn)換，可以使用 no-implicit-ref-callback-return 規(guī)則進(jìn)行代碼轉(zhuǎn)換。這將幫助你在升級(jí) React 版本時(shí)更順暢地處理 ref 相關(guān)的代碼。
React 19 為 useDeferredValue 引入了 initialValue 選項(xiàng)，該選項(xiàng)允許指定組件首次渲染時(shí)返回的值。
function Search({ deferredValue }) { // 在組件首次渲染時(shí)，返回 initialValue 作為 value。 // 隨后，useDeferredValue 會(huì)在后臺(tái)計(jì)劃一次重渲染，使用 deferredValue 作為新的 value。 const value = useDeferredValue(deferredValue, { initialValue: '' }); return ( <Results query={value} /> ); }使用 initialValue 可以確保組件在首次渲染時(shí)能夠立即顯示一個(gè)占位值，而無需等待 deferredValue 的異步計(jì)算完成。隨后，當(dāng) deferredValue 準(zhǔn)備好時(shí)，useDeferredValue 會(huì)觸發(fā)組件的后臺(tái)重渲染，以顯示最新的值。這有助于提升應(yīng)用的響應(yīng)性和用戶體驗(yàn)。
在HTML中，諸如<title>、<link>和<meta>等文檔元數(shù)據(jù)標(biāo)簽通常放置在<head>區(qū)域內(nèi)。然而，在React應(yīng)用中，決定哪些元數(shù)據(jù)適用于當(dāng)前頁面的組件可能并不直接位于渲染<head>的位置，甚至React可能根本不直接渲染<head>。過去，這些元數(shù)據(jù)標(biāo)簽需要手動(dòng)通過effect或借助如react-helmet這樣的庫進(jìn)行插入，且在服務(wù)器渲染React應(yīng)用時(shí)需要特別小心處理。
React 19引入了原生支持在組件中渲染文檔元數(shù)據(jù)標(biāo)簽的功能。這意味著可以直接在組件內(nèi)部定義這些標(biāo)簽，React會(huì)自動(dòng)將它們提升到文檔的<head>部分。這一改進(jìn)確保了元數(shù)據(jù)標(biāo)簽?zāi)軌蛟趦H客戶端應(yīng)用、流式服務(wù)端渲染（SSR）以及服務(wù)器組件等場景下正常工作。
下面是一個(gè)簡單的示例，展示了如何在React組件中定義并使用這些元數(shù)據(jù)標(biāo)簽：
function BlogPost({ post }) { return ( <article> <h1>{post.title}</h1> {/* 直接在組件內(nèi)部定義元數(shù)據(jù)標(biāo)簽 */} <title>{post.title}</title> <meta name="author" content="Josh" /> <link rel="author" /> <meta name="keywords" content={post.keywords.join(', ')} /> <p> Eee equals em-see-squared... </p> </article> ); }在這個(gè)BlogPost組件中，盡管<title>、<meta>和<link>標(biāo)簽被定義在了<article>內(nèi)部，但React會(huì)在渲染時(shí)自動(dòng)將它們移至文檔的<head>區(qū)域。這種方式簡化了元數(shù)據(jù)的管理，還增強(qiáng)了React應(yīng)用在各種渲染模式下的兼容性和靈活性。
在Web開發(fā)中，樣式表的管理至關(guān)重要，無論是通過外部鏈接（<link rel="stylesheet" href="...">）還是內(nèi)嵌方式（<style>...</style>）引入，都需要在 DOM 中精準(zhǔn)布局，以確保樣式優(yōu)先級(jí)得到妥善處理。然而，構(gòu)建一個(gè)能夠支持組件內(nèi)部樣式表組合的機(jī)制往往十分繁瑣，因此開發(fā)者常常面臨權(quán)衡：要么將樣式遠(yuǎn)離其依賴的組件加載，犧牲組織性；要么依賴外部樣式庫，增加額外的復(fù)雜性。
React 19 針對(duì)這一挑戰(zhàn)提供了內(nèi)置支持，不僅簡化了樣式表的管理流程，還進(jìn)一步增強(qiáng)了與客戶端并發(fā)渲染和服務(wù)器端流式渲染的集成能力。通過指定樣式表的優(yōu)先級(jí)，React 將自動(dòng)處理樣式表在DOM中的插入順序，確保在展示依賴于特定樣式規(guī)則的內(nèi)容之前，相關(guān)的樣式表（無論外部還是內(nèi)嵌）已經(jīng)被加載并應(yīng)用。
function ComponentOne() { return ( <Suspense fallback="loading..."> <link rel="stylesheet" href="foo" precedence="default" /> <link rel="stylesheet" href="bar" precedence="high" /> <article class="foo-class bar-class"> {...} </article> </Suspense> )}function ComponentTwo() { return ( <div> <p>{...}</p> <link rel="stylesheet" href="baz" precedence="default" /> <-- will be inserted between foo & bar </div> )}在服務(wù)端渲染過程中，React會(huì)將樣式表包含在<head>標(biāo)簽中，以確保瀏覽器在加載完成前不會(huì)進(jìn)行頁面繪制。如果在已經(jīng)開始流式傳輸后才發(fā)現(xiàn)樣式表，React 將確保在客戶端將樣式表插入到<head>標(biāo)簽中，然后再展示依賴于該樣式表的Suspense邊界的內(nèi)容。
在客戶端渲染過程中，React會(huì)等待新渲染的樣式表加載完成后再提交渲染結(jié)果。如果在應(yīng)用中的多個(gè)位置渲染了這個(gè)組件，React將確保樣式表在文檔中只被包含一次。
function App() { return <> <ComponentOne /> ... <ComponentOne /> // 不會(huì)導(dǎo)致 DOM 中出現(xiàn)重復(fù)的樣式表鏈接 </>}對(duì)于那些習(xí)慣于手動(dòng)加載樣式表的開發(fā)者來說，React 19 的這一改進(jìn)為他們提供了一個(gè)便利的機(jī)會(huì)。現(xiàn)在，可以將樣式表直接放在依賴它們的組件旁邊，這不僅有助于提升代碼的可讀性和可維護(hù)性，使得開發(fā)者可以更加清晰地了解每個(gè)組件的樣式依賴關(guān)系，而且還能夠確保只加載真正需要的樣式表。
此外，樣式庫和與打包器集成的樣式工具也可以采用這一新特性。即使開發(fā)者不直接渲染自己的樣式表，只要他們所使用的工具升級(jí)到支持這一功能，他們同樣能夠享受到這一改進(jìn)帶來的好處。
在HTML中，普通腳本（<script src="...">）和延遲腳本（<script defer src="...">）按照文檔順序加載，這限制了它們在組件樹深處的靈活使用。然而，異步腳本能夠以任意順序加載，為開發(fā)者提供了更大的靈活性。
React 19 針對(duì)異步腳本提供了增強(qiáng)的支持，允許開發(fā)者在組件樹的任何位置渲染它們，直接放在實(shí)際依賴該腳本的組件內(nèi)部。這大大簡化了腳本的管理，無需再擔(dān)心腳本實(shí)例的重新定位和去重問題。
現(xiàn)在，你可以在組件中這樣使用異步腳本：
function MyComponent() { return ( <div> <script async src="..." /> Hello World </div> ); } function App() { return ( <html> <body> <MyComponent /> ... <MyComponent /> // 不會(huì)導(dǎo)致DOM中出現(xiàn)重復(fù)的腳本 </body> </html> ); }在所有渲染環(huán)境中，異步腳本都將進(jìn)行去重處理，因此即使多個(gè)不同的組件渲染了同一個(gè)腳本，React 也只會(huì)加載和執(zhí)行該腳本一次。
在服務(wù)端渲染中，異步腳本將被包含在<head>標(biāo)簽中，并優(yōu)先于阻止繪制的更關(guān)鍵資源（如樣式表、字體和圖像預(yù)加載）之后加載。
在文檔初始加載和客戶端更新時(shí)，及時(shí)告知瀏覽器可能即將需要加載的資源，對(duì)于提升頁面性能至關(guān)重要。React 19 引入了一系列新的API，旨在簡化瀏覽器資源的加載和預(yù)加載過程，讓開發(fā)者能夠構(gòu)建出流暢且高效的用戶體驗(yàn)。
import { prefetchDNS, preconnect, preload, preinit } from 'react-dom'; function MyComponent() { preinit('https://.../path/to/some/script.js', { as: 'script' }); // 提前加載并執(zhí)行腳本 preload('https://.../path/to/font.woff', { as: 'font' }); // 預(yù)加載字體 preload('https://.../path/to/stylesheet.css', { as: 'style' }); // 預(yù)加載樣式表 prefetchDNS('https://...'); // 當(dāng)可能會(huì)從該主機(jī)請求資源但尚不確定時(shí) preconnect('https://...'); // 當(dāng)確定會(huì)從該主機(jī)請求資源但不確定具體資源時(shí) }這些 API 調(diào)用會(huì)在渲染組件時(shí)生成相應(yīng)的DOM標(biāo)簽，如下所示：
<html> <head> <!-- 鏈接根據(jù)其對(duì)頁面加載的貢獻(xiàn)程度進(jìn)行優(yōu)先級(jí)排序 --> <link rel="prefetch-dns" href="https://..."> <!-- DNS預(yù)獲取 --> <link rel="preconnect" href="https://..."> <!-- 提前建立連接 --> <link rel="preload" as="font" href="https://.../path/to/font.woff"> <!-- 預(yù)加載字體 --> <link rel="preload" as="style" href="https://.../path/to/stylesheet.css"> <!-- 預(yù)加載樣式表 --> <script async src="https://.../path/to/some/script.js"></script> <!-- 異步加載并執(zhí)行腳本 --> </head> <body> ... </body> </html>通過利用這些API，開發(fā)者可以優(yōu)化頁面的初始加載速度，減少用戶等待時(shí)間。同時(shí)，在客戶端更新時(shí)，預(yù)取和預(yù)加載資源也能幫助加快導(dǎo)航速度，提升用戶體驗(yàn)。無論是通過預(yù)加載字體和樣式表來減少頁面渲染阻塞，還是通過預(yù)取DNS和預(yù)連接來加速資源請求，這些API都為開發(fā)者提供了強(qiáng)大的工具，使資源加載更加智能和高效。
在React 19中，對(duì)掛載過程進(jìn)行了優(yōu)化，以更好地兼容第三方腳本和瀏覽器擴(kuò)展。
在客戶端掛載時(shí)，如果渲染的元素與服務(wù)器返回的HTML中的元素不一致，React會(huì)觸發(fā)客戶端的重新渲染，以確保內(nèi)容的正確性。然而，過去，若第三方腳本或?yàn)g覽器擴(kuò)展插入了某些元素，這會(huì)導(dǎo)致不匹配錯(cuò)誤并觸發(fā)不必要的客戶端渲染。
現(xiàn)在，React 19 能夠智能地跳過<head>和<body>中的意外標(biāo)簽，從而避免了因這些元素引發(fā)的不匹配錯(cuò)誤。即使因?yàn)槠渌蛐枰M(jìn)行整個(gè)文檔的重新渲染，React也會(huì)保留由第三方腳本和瀏覽器擴(kuò)展插入的樣式表，確保頁面的完整性和一致性。
React 19 對(duì)錯(cuò)誤處理進(jìn)行了優(yōu)化，旨在消除錯(cuò)誤信息的重復(fù)，并為處理捕獲和未捕獲的錯(cuò)誤提供了更多選項(xiàng)。例如，當(dāng)渲染過程中發(fā)生錯(cuò)誤并被錯(cuò)誤邊界捕獲時(shí)，以前 React 會(huì)重復(fù)拋出相同的錯(cuò)誤（一次是原始錯(cuò)誤，另一次是在嘗試自動(dòng)恢復(fù)失敗后），然后調(diào)用console.error輸出錯(cuò)誤發(fā)生位置的信息。
這種處理方式導(dǎo)致每個(gè)被捕獲的錯(cuò)誤都會(huì)被報(bào)告三次：
在 React 19 中將記錄單個(gè)錯(cuò)誤，并包含所有錯(cuò)誤信息：
此外，為了提供更細(xì)粒度的錯(cuò)誤處理控制，還新增了兩個(gè)根選項(xiàng)來與onRecoverableError相輔相成：
這些新增選項(xiàng)不僅增強(qiáng)了React的錯(cuò)誤處理能力，還賦予了開發(fā)者在不同錯(cuò)誤場景下執(zhí)行特定邏輯的能力。無論是進(jìn)行錯(cuò)誤日志的記錄、發(fā)送錯(cuò)誤報(bào)告，還是執(zhí)行其他自定義操作，這些選項(xiàng)都能滿足開發(fā)者的需求，幫助他們更有效地管理和應(yīng)對(duì)React應(yīng)用中的錯(cuò)誤情況。
React 19 現(xiàn)已正式加入對(duì)自定義元素的全方位支持，并成功通過 Custom Elements Everywhere 的所有測試。
在過去，React 對(duì)于自定義元素的處理并不盡如人意，因?yàn)樗鶎⑽醋R(shí)別的屬性（props）默認(rèn)為屬性（attributes）而非屬性（properties）。然而，在 React 19 中增加了對(duì)屬性的支持，這種支持既適用于客戶端也適用于服務(wù)器端渲染（SSR），具體策略如下：
React 19 的升級(jí)帶來了一系列重要的改進(jìn)，盡管其中涉及到一些破壞性變更，但 React 團(tuán)隊(duì)已經(jīng)努力使升級(jí)過程變得更順暢，預(yù)計(jì)對(duì)大多數(shù)應(yīng)用的影響有限。
注意： 此 beta 版的主要目的是幫助庫開發(fā)者為即將到來的React 19做好準(zhǔn)備。對(duì)于應(yīng)用開發(fā)者而言，建議先升級(jí)到React 18.3.0 版本，并耐心等待 React 19 穩(wěn)定版的發(fā)布。React 團(tuán)隊(duì)正與庫開發(fā)者緊密合作，并根據(jù)他們的反饋進(jìn)行必要的調(diào)整和改進(jìn)。為了降低升級(jí)難度，React 同步推出了 18.3 版本，以幫助開發(fā)者更好地適應(yīng)未來的變更。
React 19 升級(jí)指南：https://react.dev/blog/2024/04/25/react-19-upgrade-guide。
本文鏈接：http://www.tebozhan.com/showinfo-26-86216-0.htmlReact 19 終于來了！帶來了諸多新特性和改進(jìn)
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
上一篇： 純 CSS 檢測文本是否溢出
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)