探索 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 id="Welcome-to-React">Welcome to React 19</h1>
      <servercomponent></servercomponent>
    </div>
  );
}

---

3. 行動

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

範例：

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

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

  return (
    

setName(e.target.value)} /> Submit

); }

---

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

use() 取得數據

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

範例：

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

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