React 發生了什麼變化？

身為開發人員，您需要隨時了解所使用的技術。最近，React 19 版本進入穩定狀態。在這篇文章中，您將熟悉版本 19 中出現的變更。

這篇文章分為兩部分，第一部分是關於版本 19 中的新增內容以及 React 中改進了哪些部分。我們先來看看新聞發布之前有哪些改進。

將 ref 當作 props

refs作為props傳遞，這是多餘的。其中所寫的程式碼將是：

import { forwardRef } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  // ...
});

現在可以直接將 ref 作為 props 給出

function MyInput({placeholder, ref}) {
  return <input placeholder={placeholder} ref={ref} />
}

//...
<MyInput ref={ref} />

ref 的清理函數

如果在元件中使用了 ref，則當元件從 UI 卸載時必須清除該 ref。這對於高效的記憶體管理和避免意外情況非常重要。在先前的版本中，這是寫在useEffect的回傳部分：

function Example() {
    const ref = useRef(null);

    useEffect(() => {
        ref.current = null; // Reset ref if needed
    }, [/* dependencies */]);
}

19版本更改後，上述程式碼寫為：

<input
  ref={(ref) => {
    // ref created

    // NEW: return a cleanup function to reset
    // the ref when element is removed from DOM.
    return () => {
      // ref cleanup
    };
  }}
/>

為 useDeferredValue 指派初始值的選項

你已經知道為什麼要給initialValue，所以你可以進入下一節）

元數據支持

meta、標題）指派給所需頁面，您必須使用 useEffect 或像 React-helmet 這樣的函式庫。

版本 19 增加了直接使用這些標籤的功能。

function BlogPost({post}) {
  return (
    <article>
      <h1>{post.title}</h1>
      <title>{post.title}</title>
      <meta name="author" content="Josh" />
      <link rel="author" href="https://twitter.com/joshcstory/" />
      <meta name="keywords" content={post.keywords} />
      <p>
        Eee equals em-see-squared...
      </p>
    </article>
  );
}

自動將元標記包裝到

支援樣式

這個版本也重點優化了樣式，增加了適時下載樣式的功能以及優先權屬性。此屬性控制樣式新增至 DOM 的順序。樣式在其依賴元件安裝之前加載。

支援非同步腳本

就像樣式一樣，非同步腳本可以在所需的時間下載。載入樣式和非同步腳本的元件不必擔心在多個地方使用它們時重新下載它們，因為它們在第一次載入時就會被快取）

預先載入資源

盡快下載資源對網站效能有很好的影響。 React 19 中宣布了新的 API 來利用此功能。這些是以下

preinit - 快速下載和使用資源（腳本或模組）；
preload - 事先下載資源，這種情況下不需要快速使用已載入的資源（字型、樣式）
preconnect - 開啟與要載入資源的伺服器的連接，這會加快資源載入時間。
prefetchDNS 的工作方式與預先連線類似，不同之處在於它會在發出請求之前下載並快取資源，而無需建立連線。

支援自訂元素

先前版本使用自訂元素時React無法辨識props，從新版本開始可以毫無問題地使用。自訂元素的範例 -> 。

注意 - 在某些地方，程式碼沒有提供範例，您可以在此處查看範例

以上是React 發生了什麼變化？的詳細內容。更多資訊請關注PHP中文網其他相關文章！