首頁 > web前端 > js教程 > React 發生了什麼變化?

React 發生了什麼變化?

Barbara Streisand
發布: 2024-12-10 19:56:11
原創
481 人瀏覽過

React  nimalar o

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

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

將 ref 當作 props

我們必須使用forwardRef將

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>
  );
}
登入後複製
渲染 React 元件時,

自動將元標記包裝到

元素中。

支援樣式

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

支援非同步腳本

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

預先載入資源

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

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

支援自訂元素

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

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

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

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板