小編精選 - 技術文章翻譯 · 08月03日

React 19：新功能介紹

介紹

React 是用於建立使用者介面的流行JavaScript 程式庫，即將在即將發布的版本19 中實現巨大飛躍。感到興奮不已我們建立 Web 應用程式的方式。

在這份綜合指南中，我們將探索 React 19 的前沿功能，包括新的掛鉤、API 變更和效能增強，這些將重塑您的開發體驗。無論您是經驗豐富的 React 開發人員還是剛開始您的旅程，本文都將為您提供即將發生的事情以及如何利用這些強大的新工具的領先優勢。

React 19 有什麼新功能？

React 19 帶來了許多令人興奮的功能，旨在讓您的開發過程更順暢、更有效率、更愉快。這兒是一些精彩片段：

用於表單管理和樂觀 UI 更新的新掛鉤
改進的資料獲取能力
增強的參考管理
顯著的效能優化
改善開發者體驗

讓我們深入研究每個功能，看看它們如何改變您的 React 專案。

React 19 入門

截至 2024 年，React 19 仍在積極開發中。但是，您可以使用測試版開始嘗試最新功能。以下是如何使用 React 19 設定新專案：

使用Vite建立一個新專案：

   npm create vite@latest my-react-19-app

出現提示時選擇 React 和 JavaScript。

   cd my-react-19-app

安裝 React 19 的最新測試版：

   npm install react@beta react-dom@beta

啟動您的開發伺服器：

   npm run dev

現在您已準備好探索 React 19 令人興奮的新功能！

使用`useForm`簡化表單管理

React 19 中最令人期待的功能之一是新的useForm鉤子。這項強大的附加功能簡化了表單處理，減少了樣板程式碼並使表單管理變得輕而易舉。

以下是如何使用useForm建立登入表單的範例：

import React from 'react';
import { useForm } from 'react';

function LoginForm() {
  const { formData, handleSubmit, isPending } = useForm(async ({ username, password }) => {
    try {
      const response = await loginAPI({ username, password });
      return { success: true, data: response.data };
    } catch (error) {
      return { success: false, error: error.message };
    }
  });

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="username" placeholder="Username" required />
      <input type="password" name="password" placeholder="Password" required />
      <button type="submit" disabled={isPending}>
        {isPending ? 'Logging in...' : 'Log In'}
      </button>
      {formData.error && <p className="error">{formData.error}</p>}
      {formData.success && <p className="success">Login successful!</p>}
    </form>
  );
}

使用useForm ，您不再需要手動管理表單狀態、處理提交或追蹤載入狀態。這一切都已為您處理好，讓您專注於重要的邏輯。

使用`useOptimistic`建立響應式 UI

React 19 引入了useOptimistic鉤子，它使您能夠透過實現樂觀更新來建立高度響應的使用者介面。此功能對於需要即時回饋的應用程式特別有用，例如社交媒體平台或協作工具。

以下是如何在待辦事項清單應用程式中使用useOptimistic的範例：

import React, { useState } from 'react';
import { useOptimistic } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
    todos,
    (state, newTodo) => [...state, { id: Date.now(), text: newTodo, status: 'pending' }]
  );

  const addTodo = async (text) => {
    addOptimisticTodo(text);
    try {
      const newTodo = await apiAddTodo(text);
      setTodos(currentTodos => [...currentTodos, newTodo]);
    } catch (error) {
      console.error('Failed to add todo:', error);
      // Handle error and potentially revert the optimistic update
    }
  };

  return (
    <div>
      <input
        type="text"
        placeholder="Add a new todo"
        onKeyPress={(e) => e.key === 'Enter' && addTodo(e.target.value)}
      />
      <ul>
        {optimisticTodos.map((todo) => (
          <li key={todo.id}>
            {todo.text} {todo.status === 'pending' && '(Saving...)'}
          </li>
        ))}
      </ul>
    </div>
  );
}

這種方法可讓您立即更新 UI，提供快速的使用者體驗，同時實際的 API 呼叫在背景進行。

透過`use`徹底改變資料獲取

React 19 中的新use函數將改變我們處理資料擷取和非同步操作的方式。雖然仍處於實驗階段，但它有望簡化複雜的資料獲取場景並提高程式碼可讀性。

以下是如何使用use函數的範例：

import React, { Suspense } from 'react';
import { use } from 'react';

function UserProfile({ userId }) {
  const user = use(fetchUser(userId));

  return (
    <div>
      <h1>{user.name}</h1>
      <p>Email: {user.email}</p>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<div>Loading user profile...</div>}>
      <UserProfile userId={123} />
    </Suspense>
  );
}

function fetchUser(userId) {
  return fetch(`https://api.example.com/users/${userId}`)
    .then(response => response.json());
}

use函數可讓您以更同步的方式編寫非同步程式碼，從而更容易推理和維護。

增強的參考管理

React 19 對引用管理進行了改進，使得在複雜的元件層次結構中使用引用變得更加容易。增強的useRef和forwardRef API 提供了更大的靈活性和易用性。

以下是使用改進的引用轉發的自訂輸入元件的範例：

import React, { useRef, forwardRef } from 'react';

const CustomInput = forwardRef((props, ref) => (
  <input
    ref={ref}
    {...props}
    style={{ border: '2px solid blue', borderRadius: '4px', padding: '8px' }}
  />
));

function App() {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <CustomInput ref={inputRef} placeholder="Type here..." />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

此範例示範如何輕鬆建立可重複使用元件，並透過 refs 公開其內部 DOM 元素。

性能改進

React 19 不僅涉及新功能；還涉及新功能。它還帶來了顯著的性能改進。這些優化包括：

透過改進的比較演算法更快地重新渲染
更好的記憶體管理
縮小捆綁尺寸，適合較小的應用

雖然這些改進發生在幕後，但您會注意到您的 React 應用程式運作得更流暢、更快，尤其是在低端設備上。

遷移到 React 19

當 React 19 正式發佈時，遷移現有專案將是至關重要的一步。以下是準備遷移的一些提示：

首先更新您的開發環境和建置工具。
查看官方遷移指南（將在發布後提供）以了解任何重大變更。
逐漸在應用程式的非關鍵部分採用新功能。
執行徹底的測試以確保與現有程式碼庫的兼容性。
利用useForm和useOptimistic等新功能來簡化您的程式碼。

請記住，雖然新功能令人興奮，但謹慎進行遷移並進行徹底測試至關重要。

結論

React 19 代表了 Web 開發領域的重大飛躍。憑藉其新的鉤子、改進的性能和增強的開發人員體驗，它將使建置現代 Web 應用程式比以往更加高效和愉快。

當我們熱切等待正式版本時，現在是開始在專案中嘗試這些新功能的最佳時機。透過熟悉 React 19 的功能，您將做好充分準備，在它發佈時充分發揮其潛力。

請繼續關注更多更新，並祝您使用 React 19 編碼愉快！

我們希望本 React 19 指南對您有所幫助且內容豐富。如果您有任何疑問或想查看有關特定 React 19 功能的更深入的教程，請在下面的評論中告訴我們。不要忘記關注 React 和 Web 開發的最新更新！

原文出處：https://dev.to/vyan/react-19-a-game-changer-for-modern-web-development-1bih

0個讚 0留言 63瀏覽

共有 0 則留言

登入之後發表留言

文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式

小編精選 - 技術文章翻譯

精選技術文章翻譯，幫助開發者持續吸收新知。

React 19：新功能介紹

React 19：新功能介紹

介紹

目錄

React 19 有什麼新功能？

React 19 入門

使用useForm簡化表單管理

使用useOptimistic建立響應式 UI

透過use徹底改變資料獲取

增強的參考管理

性能改進

遷移到 React 19

結論

使用`useForm`簡化表單管理

使用`useOptimistic`建立響應式 UI

透過`use`徹底改變資料獲取