React 19 beta 終于來了，但其中一些非常棒的功能卻因困惑和溝通不暢而黯然失色。

React 19 beta 可以隨時發(fā)布，但現(xiàn)在選擇在 2024 年 3 月 25 日發(fā)布實屬最佳，因為開發(fā)世界暫時沒有其他重大事件。

編譯器尚未到來

一些開發(fā)者對這次發(fā)布持樂觀態(tài)度，但也有許多人擔心此次版本中沒有提到編譯器。

React 編譯器是 React 團隊長時間實驗的工具，目前用于運行 Instagram，并且預計很快會發(fā)布。開發(fā)者們對編譯器的期望很高，因為它將減少手動記憶化的需求，這是一項耗時且容易出錯的 React 修補工作。有了編譯器，React 將更善于判斷何時需要更新 UI，何時不需要，從而提升性能。

但我們仍不確定編譯器何時能正式發(fā)布。可能在五月，也許是 2024 年或 2026 年？希望它能在新 GTA 發(fā)布前上線！

你將享受更多的服務器端支持

SPA（單頁應用）愛好者可能對這些消息不太滿意，因為 React 仍在繼續(xù)推進對服務器端特性的支持。

其實，SPA 并不適合描述這類應用程序。任何認為應用和 API 應該完全分開的開發(fā)者都可能不喜歡 React 正在推進的方向。

use server 和 actions 引入了一個新的思維模式，在這一模式下，可以在服務器或瀏覽器中無縫運行代碼，除非明確指定其他方式。

這種新的思維模式通過 actions 得到了擴展，能夠處理待處理和錯誤狀態(tài)。

然而，這個新模型在博客文章中解釋得并不清楚，容易讓 React 開發(fā)者感到困惑。

這也可以理解，因為新的 React 文檔建議開發(fā)者使用基于 React 的框架，而不是直接使用 React。但另一方面，這也使得直接使用 React 的開發(fā)者面臨困難局面。

我們有了新的 hooks 和表單操作，可以直接從表單元素級別獲取表單狀態(tài)。

新的 API 可以通過 use 函數(shù)調用來掛起功能，還提供了服務器組件。

React 團隊需要付出大量努力來向新手程序員解釋這些復雜內容。

但也有一些不錯的方面。

可以告別 forwardRef，被 ref 取代

forwardRef 現(xiàn)在將被替換，你可以直接用 ref 傳遞組件元素。這是一個讓人意外的好變化。

可以直接使用 Context 而不是 Context.Provider

現(xiàn)在提供上下文時，你無需使用 Context.Provider，而是直接使用 Context。示例如下：

const ThemeContext = createContext('');

function App({children}) {
  return (
    <ThemeContext value="dark">
      {children}
    </ThemeContext>
  );  
}

可以更方便地清理被卸載的 refs：

通過在組件卸載時清理關聯(lián)的 refs，可以確保沒有懸掛的引用或潛在的內存泄漏。

<input
  ref={(ref) => {
    // 當 ref 被創(chuàng)建時，執(zhí)行一些初始化操作
    if (ref) {
      // 初始化代碼，例如，添加事件監(jiān)聽器或設置屬性
    }

    // 返回清理函數(shù)，在元素被移除時調用
    return () => {
      // 清理代碼，例如，移除事件監(jiān)聽器或重置屬性
    };
  }}
/>

可以在任何組件中定義 <meta> 標簽

另一個值得注意的改進是，現(xiàn)在支持從任意組件動態(tài)更新 <meta> 標簽。

import { Helmet } from "react-helmet";

function BlogPost({ post }) {
  return (
    <article>
      <Helmet>
        <title>{post.title}</title>
        <meta name="author" content="Josh" />
        <link rel="author"  />
        <meta name="keywords" content={post.keywords} />
      </Helmet>

      <h1>{post.title}</h1>
      <p>Eee equals em-see-squared...</p>
    </article>
  );
}

可以在組件級別使用樣式表

現(xiàn)在，在組件級別添加樣式將不會出現(xiàn)任何問題。React 將在顯示組件之前加載樣式表，這也為懶加載樣式提供了可能性：

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>

  )

}

可以預加載資源

在 React 19 中，你將能夠在組件中使用函數(shù)預加載資源，而不是在 HTML 中通過 HTML 標簽預加載。

import { prefetchDNS, preconnect, preload, preinit } from 'react-dom'

function MyComponent() {

  preinit('https://.../path/to/some/script.js', {as: 'script' }) // loads and executes this script eagerly

  preload('https://.../path/to/font.woff', { as: 'font' }) // preloads this font

  preload('https://.../path/to/stylesheet.css', { as: 'style' }) // preloads this stylesheet

  prefetchDNS('https://...') // when you may not actually request anything from this host

  preconnect('https://...') // when you will request something but aren't sure what

}

基本的自定義元素支持

React 團隊仍在努力支持 HTML 自定義元素。雖然目前還沒有針對 React 19 beta 的官方測試結果，但根據(jù) React 博客的說法，它是符合測試標準的。

PropTypes 被移除了

PropTypes 是 React 團隊做出的一個奇怪決策，當時他們完全忽略了 TypeScript 的存在。

幸運的是，PropTypes 在 2017 年被棄用，現(xiàn)在處理它們的代碼已從 React 中移除。這意味著在代碼庫中保留這些怪物般的工具已經(jīng)沒有意義了。如果想要了解自己正在使用的類型，至少需要將代碼庫重寫為 TypeScript。

如何為 React 19 做好準備？

React 19 beta 已經(jīng)發(fā)布，但這并不意味著你必須立刻更新。我建議等待正式發(fā)布。然而，你可以先安裝 React 18.3.0。它和 18.2.0 類似，但會顯示關于在 React 19 中將被廢棄的功能的提示信息。

因此，你可以提前做好準備。

你可以在 npm 上找到 React 19 beta 和 React 18.3.0 版本的構建包。

React 19 beta 的源碼暫時不可用。