Apakah yang telah berubah dalam React?

Sebagai pembangun, anda perlu sentiasa mengikuti perkembangan teknologi yang anda gunakan. Baru-baru ini, versi 19 React telah menjadi stabil. Dalam siaran ini, anda akan mengenali perubahan yang keluar dalam versi 19.

Siaran adalah dalam dua bahagian, yang pertama adalah mengenai perkara baharu dalam versi 19 dan bahagian yang telah dipertingkatkan dalam React. Mari lihat apa yang dipertingkatkan sebelum berita.

memberikan rujukan sebagai alat peraga

Kita perlu menggunakan forwardRef untuk menghantar

ref sebagai prop, dan itu akan menjadi berlebihan. Dan kod yang tertulis di dalamnya ialah:

import { forwardRef } from 'react';

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

Kini ref boleh diberikan terus sebagai props

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

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

fungsi pembersihan untuk ref

Jika ref digunakan dalam komponen, ref mesti dikosongkan apabila komponen dinyahlekapkan daripada UI. Ini penting untuk pengurusan ingatan yang cekap dan untuk mengelakkan situasi yang tidak dijangka. Dalam versi sebelumnya, ini telah ditulis di bahagian kembali useEffect:

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

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

Selepas perubahan dalam versi 19, kod di atas ditulis sebagai:

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

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

Pilihan untuk menetapkan nilai awal untuk menggunakanDeferredValue

anda sudah tahu sebab initialValue diberikan, jadi anda boleh pergi ke bahagian seterusnya )

Sokongan metadata

Untuk menetapkan elemen meta seperti

meta, tajuk pada halaman yang diingini, anda perlu menggunakan useEffect atau perpustakaan seperti react-helmet.

Versi 19 menambahkan keupayaan untuk menggunakan teg ini secara langsung.

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>
  );
}

secara automatik membalut tag meta ke dalam elemen

apabila memaparkan komponen React.

Gaya sokongan

Versi ini juga memfokuskan pada mengoptimumkan gaya, menambahkan keupayaan untuk memuat turun gaya pada masa yang betul dan atribut keutamaan. Atribut ini mengawal susunan gaya yang ditambahkan pada DOM. Gaya dimuatkan sebelum lekap komponen bergantungnya.

Sokongan untuk skrip tak segerak

Sama seperti gaya, skrip tak segerak boleh dimuat turun pada masa yang dikehendaki. Komponen yang memuatkan gaya dan skrip tak segerak tidak perlu risau tentang memuat turun semula skrip apabila ia digunakan di berbilang tempat, kerana ia dicache pada kali pertama ia dimuatkan )

Pramuat sumber

Memuat turun sumber secepat mungkin mempunyai kesan yang baik pada prestasi tapak. API baharu telah diumumkan dalam React 19 untuk memanfaatkan keupayaan ini. Ini adalah

berikut

preinit - untuk memuat turun dan menggunakan sumber dengan cepat (skrip atau modul);
pramuat - untuk memuat turun sumber terlebih dahulu, dalam kes ini, tidak perlu menggunakan sumber yang dimuatkan dengan cepat (fon, gaya)
prasambung - membuka sambungan ke pelayan tempat anda ingin memuatkan sumber, yang mempercepatkan masa pemuatan sumber.
prefetchDNS berfungsi seperti prasambung, kecuali ia memuat turun dan menyimpan sumber sebelum permintaan dibuat tanpa membuat sambungan.

Sokongan untuk elemen tersuai

React tidak mengenali prop apabila elemen tersuai digunakan dalam versi sebelumnya, bermula dengan versi baharu ia boleh digunakan tanpa masalah. Contoh elemen tersuai -> .

Nota - di sesetengah tempat contoh tidak diberikan melalui kod, anda boleh melihat contoh di sini

Atas ialah kandungan terperinci Apakah yang telah berubah dalam React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!