新的 React 帶來了什麼 - 獲得清晰的了解
- Linda Hamilton原創
- 2024-11-24 13:16:15357瀏覽
React 19 於 2024 年 4 月 25 日發布。 JavaScript 世界變化如此之快，有時會讓人感覺難以跟上。但是，當這些變更旨在讓您作為 React 開發人員的生活變得更輕鬆時，就值得一看，對吧？由於 React 是這個生態系統中如此重要的一部分，因此保持更新是必要的。
React 19 最好的部分是它專注於讓事情變得更簡單。這些更新旨在讓學習 React 變得更容易，讓您花更多時間進行創建，而不是處理棘手的設定。一些新功能確實改變了遊戲規則，可能會極大地改變您的工作方式，所以您絕對不想錯過它們。
我總是嘗試以易於理解的方式解釋事物，而不使用複雜的字詞。本文也不例外。我的目標是確保您清楚了解所有內容，所以讓我們一起探索 React 19 中的精彩更新！
請記住，React 19 還不太穩定。目前它被稱為 React Canary。因此，請記住，實際上並不建議將其用於生產。
反應編譯器
為了優化我們的 React 應用程序，我們使用一些內建方法，例如 useMemo、useCallback 或 memo。這告訴 React 如果輸入沒有改變就不要再編譯程式碼。但如果你忘記應用記憶化，就會導致浪費 React 資源和運算能力。為了解決這個問題，React 19 引進了 React Compiler。 React 的新編譯器是 19 版本新發布的亮點。新的編譯器會在幕後優化您的程式碼，因此您可以放棄這些鉤子並專注於編寫漂亮、乾淨的 React 元件。
簡而言之，您不需要使用 useMemo 或 useCallback 包裝函數來最佳化效能，也不需要使用 memo 包裝元件來防止重新渲染元件。
操作（useTransition 掛鉤）
我們來聊聊廢話吧？ ！ ！你是否注意到在 React 19 發布之前 useTransition 鉤子幾乎沒有被提及？還是只有我這樣？嗯，至少這是我注意到的，尤其是對於初級開發人員來說。無論如何，讓我向您介紹一下它在先前版本中的工作原理，然後我們將了解為什麼現在它如此重要。
useTransition 傳回一個包含兩個元素的陣列：startTransition 函數和 isPending 布林值。您可以將狀態更新包裝在 startTransition 函數中，以將它們標記為轉換（優先順序較低的程式碼）。這意味著用 startTransition 包裹的部分在其他連續任務完成後開始工作。
在 React 18 中，startTransition 函數不直接支援非同步函數。這是一個限制，因為 startTransition 旨在將更新標記為低優先級，但無法原生處理非同步邏輯。
在 React 19 中，此限制已解決。現在，startTransition 支援非同步函數，這表示您可以在其中執行非同步任務（例如，資料擷取），同時將這些更新標記為轉換。此增強功能允許更靈活和直觀地使用 startTransition，使其感覺像是一項「新」功能，儘管它在技術上是對現有功能的改進。
？
按照慣例，使用非同步轉換的函數稱為「操作」。
例如，您可以在 useState 中處理掛起和錯誤狀態：
// Before Actions
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 支援在轉換中使用非同步函數來自動處理待處理狀態、錯誤、表單和樂觀更新。例如，您可以使用 useTransition 來為您處理掛起狀態：
// Using pending state from Actions
function UpdateName({}) {
const [name, setName] = useState("");
const [error, setError] = useState(null);
const [isPending, startTransition] = useTransition();
const handleSubmit = () => {
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>
);
}
非同步轉換將立即將 isPending 狀態設為 true，發出非同步請求，並在任何轉換後將 isPending 切換為 false。這使您可以在資料變更時保持當前 UI 的回應能力和互動性。
行動
React 團隊增加了對傳遞函數作為操作的支援。
export default function App() {
const [name, setName] = useState(
() => JSON.parse(localStorage.getItem("name")) || "Anonymous user"
)
async function formAction(formData){
try {
const newName = await updateNameInDB(formData.get("name"))
setName(newName)
}
}
return (
<>
<p className="username">
Current user: <span>{name}</span>
</p>
<form action={formAction}>
<input
type="text"
name="name"
required
/>
<button type="submit">Update</button>
</form>
</>
)
}
formAction 函數（您可以命名任何名稱）在其參數中取得表單資料。每個欄位都由名稱屬性表示，因此在命名輸入時必須小心。 formData 參數其實就是本機 FormData Web API 物件。您可以在 mdn 網路文件上找到它。另一個好處是你不需要應用 event.preventDefault()，因為它是由 React 處理的。
當表單操作成功時，React 會自動重設表單。但如果你想重置
以上是新的 React 帶來了什麼 - 獲得清晰的了解的詳細內容。更多資訊請關注PHP中文網其他相關文章！