探索 React 新功能和程式碼範例

React 19 現已推出，它包含旨在增強開發人員體驗和應用程式效能的功能。從優化程式碼到引入強大的新鉤子，React 19 繼續鞏固其作為構建現代 Web 應用程式首選庫的地位。讓我們深入了解關鍵功能，並透過實際程式碼範例探索它們如何徹底改變您的開發流程。

---

React 19 的主要特性

1.React編譯器

新的 React 編譯器透過將程式碼轉換為高效的 JavaScript 來簡化和最佳化您的程式碼。這消除了手動性能調整（例如記憶）的需要，讓開發人員專注於建立功能而不是微調性能。

範例：

// Before: Manual optimization with useCallback
const MemoizedComponent = React.useCallback(() => {
  return <div>Optimized!</div>;
}, []);

// After: Automatically optimized
function Component() {
  return <div>Optimized!</div>;
}

---

2. 伺服器元件

React 19 中的伺服器元件透過在伺服器上渲染元件來減少傳送到客戶端的 JavaScript 量。這可以提高效能並實現更快的頁面載入。

範例：

// ServerComponent.server.jsx
export default function ServerComponent() {
  return <div>This is rendered on the server.</div>;
}

// App.jsx
import ServerComponent from './ServerComponent.server';

function App() {
  return (
    <div>
      <h1>Welcome to React 19</h1>
      <ServerComponent />
    </div>
  );
}

---

3. 行動

操作簡化了狀態更新和錯誤處理。透過使用「use action」指令標記函數，React 可以自動管理掛起狀態、錯誤和樂觀更新。

範例：

function UpdateName() {
  const [name, setName] = useState('');

  const handleSubmit = async () => {
    'use action';
    await updateName(name);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      <button type="submit">Submit</button>
    </form>
  );
}

---

4. 新 Hooks：use()、useFormStatus() 和 useOptimistic()

use() 取得數據

use() 鉤子允許開發人員直接在元件內處理 Promise。

範例：

function DataFetchingComponent() {
  const data = use(fetchData());

  return (
    <div>
      <h1>Data:</h1>
      <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}

); }

登入後複製

useFormStatus() 進行表單管理

透過提交狀態和錯誤的即時回饋來簡化表單狀態管理。

範例：

function FormComponent() {
  const { isSubmitting, error } = useFormStatus();

  return (
    <form>
      <button type="submit" disabled={isSubmitting}>Submit</button>
      {error && <p>Error: {error.message}</p>}
    </form>
  );
}

useOptimistic() 進行樂觀 UI 更新

useOptimistic() 鉤子讓實作樂觀更新變得簡單。

範例：

function OptimisticUpdateComponent() {
  const [items, setItems] = useState(initialItems);
  const [optimisticItems, addItem] = useOptimistic(items, async (newItem) => {
    await apiAddItem(newItem);
    return [...items, newItem];
  });

  return (
    <ul>
      {optimisticItems.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
      <button onClick={() => addItem({ id: Date.now(), name: 'New Item' })}>
        Add Item
      </button>
    </ul>
  );
}

---

5. 指令：“使用客戶端”和“使用伺服器”

檔案級指令明確定義元件是否應該在客戶端或伺服器上渲染，從而更容易管理渲染邏輯。

範例：

// ClientComponent.jsx
'use client';

export default function ClientComponent() {
  return <div>This component is rendered on the client.</div>;
}

// ServerComponent.jsx
'use server';

export default function ServerComponent() {
  return <div>This component is rendered on the server.</div>;
}

---

React 19 的實際優勢

提高性能

React 編譯器和伺服器元件等功能最大限度地減少了發送到客戶端的 JavaScript 數量，從而實現更快的載入時間和更好的使用者體驗。

簡化的程式碼庫

新的掛鉤和操作減少了樣板程式碼，使應用程式更易於維護和擴展。

提高開發人員的生產力

借助 useOptimistic() 和 use() 等工具，開發人員可以專注於建置功能，而不是手動處理複雜的狀態管理或非同步操作。

---

結論

React 19 是 Web 開發領域向前邁出的重要一步。其功能優先考慮效能、可擴展性和開發人員體驗，使建立強大的應用程式比以往更容易。無論您是經驗豐富的 React 開發人員還是剛剛入門，這些更新都值得探索並整合到您的專案中。

你對 React 19 感到興奮嗎？在下面的評論中分享您的想法和經驗！

以上是探索 React 新功能和程式碼範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！