Cara Upgrade ke React 18

React 18 mengembangkan kerangka kerja komponen JavaScript yang populer dengan fitur-fitur baru yang dibangun di sekitar rendering dan ketegangan secara simultan. Ini menjanjikan kinerja yang lebih baik, lebih banyak kemampuan, dan pengalaman pengembang yang lebih baik untuk aplikasi yang melakukan transisi.

Dalam artikel ini, kami akan menunjukkan cara mengupgrade basis kode Anda yang ada ke React 18. Perhatikan bahwa panduan ini hanya ikhtisar dari perubahan yang paling banyak diterapkan. Transisi seharusnya relatif tidak menyakitkan untuk proyek kecil yang sudah mengikuti praktik terbaik Bereaksi; set besar komponen kompleks dapat menghadirkan beberapa masalah, yang akan kami jelaskan di bawah ini.

Menginstal React 18

Sebelum melakukan hal lain, gunakan npm untuk meningkatkan dependensi React proyek Anda ke v18:

$ npm install react@latest react-dom@latest

Rilis baru secara teknis tidak memiliki inkompatibilitas mundur. Fitur baru diaktifkan berdasarkan keikutsertaan. Karena Anda belum mengubah kode apa pun, Anda harus memulai aplikasi dan mengamatinya dirender dengan benar. Proyek Anda akan berjalan dengan tindakan React 17 yang ada.

$ npm start

Aktifkan Fitur React 18: API Root Baru

Menggunakan React 18 tanpa perubahan apa pun pada basis kode akan menyebabkan efek samping: Anda akan melihat peringatan di konsol browser setiap kali aplikasi Anda dipasang dalam mode pengembangan.

ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17.

Pesan penghentian ini dapat diabaikan dengan aman jika Anda belum siap untuk meningkatkan proyek Anda. Saat Anda ingin menggunakan kemampuan React 18, Anda perlu membuat perubahan yang dijelaskannya. Orang tua ReactDOM.render() Fungsi tersebut telah digantikan oleh root API baru yang lebih berorientasi objek. Selain meningkatkan kemudahan penggunaan, ini juga mengaktifkan sistem rendering bersamaan yang memungkinkan semua fitur headline baru.

Di dalam Anda index.js Hai app.js file, cari baris seperti ini:

import App from "./App.js";
import ReactDOM from "react-dom";
 
const container = document.getElementById("react");
ReactDOM.render(<App />, container);

Ini adalah titik masuk khas untuk aplikasi React. Ini membuat instance dari yang diimpor App komponen sebagai elemen root aplikasi Anda. Konten yang dirender disimpan sebagai innerHTML elemen HTML dengan id="react".

Untuk beralih ke React 18 root API, ganti kode di atas dengan kode berikut:

import App from "./App.js";
import {createRoot} from "react-dom/client";
 
const container = document.getElementById("react");
const root = createRoot(container);
root.render(<App />);

Ini memiliki efek yang sama dengan yang lama ReactDOM.render() API. Alih-alih menginisialisasi elemen root dan merender aplikasi Anda sebagai operasi imperatif, React 18 membuat Anda terlebih dahulu membuat objek root dan kemudian merender konten Anda secara implisit.

Selanjutnya temukan tempat di kode Anda di mana Anda meng-unmount simpul root Anda. Mengubah ReactDOM.unmountComponentAtNode() ke yang baru unmount() metode pada objek root Anda:

// Before
import App from "./App.js";
import ReactDOM from "react-dom";
 
const container = document.getElementById("react");
ReactDOM.render(<App />, container);
ReactDOM.unmountComponentAtNode(container);
 
// After
import App from "./App.js";
import {createRoot} from "react-dom/client";
 
const container = document.getElementById("react");
const root = createRoot(container);
root.render(<App />);
root.unmount();

Menggantikan Render Callback

Itu ReactDOM.render() argumen callback opsional metode ini tidak memiliki padanan langsung di root API React 18. Anda dapat menggunakan kode ini sebelum login Rendered! di konsol setelah React merender simpul root:

import App from "./App.js";
import ReactDOM from "react-dom";
 
const container = document.getElementById("react");
ReactDOM.render(<App />, container, () => console.log("Rendered!"));

Fungsionalitas ini telah dihapus karena waktu pemanggilan panggilan balik tidak dapat diprediksi saat menggunakan fitur rendering server hidrasi parsial dan streaming baru dari React 18. Jika Anda sudah menggunakan panggilan balik render dan perlu mempertahankan kompatibilitas, Anda dapat mencapai perilaku serupa menggunakan referensi mekanisme:

import {createRoot} from "react-dom/client";
 
const App = ({callback}) => (
    <div ref={callback}>
        <h1>Demo App</h1>
    </div>
);
 
const container = document.getElementById("react");
const root = createRoot(container);
root.render(<App callback={() => console.log("Rendered!")} />);

React panggilan fungsi ref ketika komponen dipasang. Menyetel referensi ke komponen yang merupakan simpul akar memungkinkan Anda menentukan kapan rendering terjadi, memberikan efek yang mirip dengan sistem callback render lama.

Tingkatkan Masalah Debug

Aplikasi Anda sekarang harus dirender dengan fitur React 18 dan tanpa peringatan konsol apa pun. Uji aplikasi Anda secara menyeluruh untuk memastikan semuanya masih berfungsi seperti yang Anda harapkan. Jika Anda menemukan masalah, Anda dapat menyelesaikannya menggunakan resolusi umum ini.

melihat

Aplikasi dikemas dalam <StrictMode> Komponen mungkin berperilaku berbeda saat merender dalam mode pengembangan React 18. Ini karena Mode Ketat sekarang menguji apakah basis kode Anda mendukung status yang dapat digunakan kembali, sebuah konsep yang akan diperkenalkan sepenuhnya oleh React di rilis mendatang.

Status yang dapat digunakan kembali memungkinkan React untuk me-remount komponen yang sebelumnya dihapus dengan status terakhirnya secara otomatis dipulihkan. Ini mengharuskan bagian Anda tahan terhadap permintaan efek ganda. Mode Ketat sekarang membantu Anda mempersiapkan keadaan yang dapat digunakan kembali dengan mensimulasikan pemasangan, pelepasan, dan pemasangan ulang komponen Anda setiap kali digunakan, menangani masalah apa pun jika keadaan sebelumnya tidak dapat dipulihkan. Anda dapat menonaktifkan Mode Ketat jika mendeteksi masalah dengan aplikasi Anda atau dependensinya yang belum siap Anda atasi.

Mendukung Batching Pembaruan Status

Bereaksi 18 mengubah cara pembaruan status “dikumpulkan” untuk meningkatkan kinerja. Saat Anda mengubah nilai status beberapa kali dalam suatu fungsi, React mencoba menggabungkannya menjadi satu rendering ulang:

const Component = () => {
 
    const [query, setQuery] = useState("");
    const [queryCount, setQueryCount] = useState(0);
 
    /**
     * Two state updates, only one re-render
     */
    setQuery("demo");
    setQueryCount(queryCount + 1);
 
};

Mekanisme ini meningkatkan efisiensi tetapi sebelumnya hanya bekerja di dalam event handler React. Di React 18, ini berfungsi dengan semua pembaruan status, bahkan jika itu berasal dari pengendali acara asli, batas waktu, atau Janji. Beberapa kode mungkin berperilaku berbeda jika Anda membuat pembaruan status berturut-turut di salah satu area ini.

const Component = () => {
 
    const [query, setQuery] = useState("");
    const [queryId, setQueryId] = useState("");
    const [queryCount, setQueryCount] = useState(0);
 
    const handleSearch = query => {
       fetch(query).then(() => {
 
            setQuery("demo");
            setQueryCount(1);
 
            // In React 17, sets to "query-1"
            // In React 18, sets to "query-0" - previous state update is batched with this one
            setQueryId(`query-${queryCount}`);
 
        });
    }
 
};

Anda dapat menonaktifkan perilaku ini dalam situasi di mana Anda tidak siap untuk memfaktorkan ulang kode Anda. Bungkus pembaruan status flushSync() untuk memaksa mereka untuk segera berkomitmen:

const Component = () => {
 
    const [query, setQuery] = useState("");
    const [queryId, setQueryId] = useState("");
    const [queryCount, setQueryCount] = useState(0);
 
    const handleSearch = query => {
       fetch(query).then(() => {
 
            flushSync(() => {
                setQuery("demo");
                setQueryCount(1);
            });
 
            // Sets to "query-1"
            setQueryId(`query-${queryCount}`);
 
        });
    }
 
};

Berhenti Menggunakan Fitur yang Dihapus dan Tidak Didukung

Setelah semua aspek di atas telah diatasi, aplikasi Anda harus sepenuhnya kompatibel dengan React 18. Meskipun ada beberapa perubahan lagi pada permukaan API, ini seharusnya tidak memengaruhi sebagian besar aplikasi. Berikut beberapa hal yang perlu diketahui:

• unstable_changedBits telah dihapus – API yang tidak didukung ini memungkinkan penyisihan dari pembaruan konteks. Ini tidak lagi tersedia.
• Itu Object.assign() polyfill dihapus – Anda harus menambahkan secara manual object-assign paket polyfill jika Anda perlu mendukung browser lama yang tidak memiliki built-in Object.assign().
• Internet Explorer tidak lagi didukung – React secara resmi menjatuhkan kompatibilitas dengan Internet Explorer sebelum browser mengakhiri dukungan pada bulan Juni. Anda tidak boleh memutakhirkan ke React 18 jika Anda masih membutuhkan aplikasi Anda untuk berjalan di IE.
• Menggunakan Ketegangan dalam a undefined mundur sekarang sama dengan null – Batas ketegangan dengan fallback={undefined} sebelumnya dilewati, memungkinkan kode untuk mengalir ke batas induk berikutnya di pohon. React 18 sekarang menghormati komponen Suspense tanpa fallback.

Render Sisi Server

Aplikasi yang menggunakan rendering sisi server akan memerlukan beberapa perubahan lagi untuk bekerja dengan React 18.

Sejalan dengan API root baru, Anda harus mengganti yang lama hydrate() berfungsi dalam kode sisi klien Anda dengan yang baru hydrateRoot() disediakan oleh react-dom/client kemasan:

// Before
import App from "./App.js";
import ReactDOM from "react-dom";
 
const container = document.getElementById("react");
ReactDOM.hydrate(<App />, container);
 
// After
import App from "./App.js";
import {createRoot} from "react-dom/client";
 
const container = document.getElementById("react");
const root = hydrateRoot(container, <App />);

Di kode sisi server Anda, ganti panggilan API rendering usang dengan rekan-rekan barunya. Dalam kebanyakan kasus, Anda harus berubah renderToNodeStream() ke yang baru renderToReadableStream(). API aliran baru membuka akses ke kemampuan rendering server streaming React 18, di mana server dapat terus menyajikan HTML baru ke browser setelah rendering awal aplikasi Anda.

Mulai Menggunakan Fitur React 18

Sekarang setelah Anda memutakhirkan, Anda dapat mulai membuat aplikasi Anda lebih kuat dengan memasukkan fitur React 18. Penggunaan konkurensi React berarti bahwa rendering komponen dapat ditunda, menyebabkan membuka kemampuan baru dan UI yang lebih responsif.

Beberapa fitur tambahan termasuk pembaruan besar untuk Suspense, cara untuk memprioritaskan pembaruan status ke Transisi, dan mekanisme bawaan untuk membatasi rendering ulang yang disebabkan oleh pembaruan yang tidak mendesak tetapi berfrekuensi tinggi. Ada beberapa perubahan dan peningkatan lainnya juga: Anda dapat kembali undefined dari suatu zat render() cara, peringatan tentang menelepon setState() di bagian yang tidak dipasang telah dihapus, dan beberapa atribut HTML baru seperti imageSizes, imageSrcSetdan aria-description dikenali oleh penyaji React DOM.

Ringkasan

React 18 stabil dan siap digunakan. Dalam kebanyakan kasus, proses peningkatan harus cepat dan mudah, hanya membutuhkan pembaruan npm dan peralihan ke root API baru. Anda tetap harus menguji semua komponen Anda: mereka mungkin berperilaku berbeda dalam beberapa situasi, seperti dalam Mode Ketat atau ketika pengelompokan otomatis diterapkan.

Rilis baru ini menunjukkan arah masa depan React sebagai kerangka kerja berkinerja tinggi untuk semua jenis aplikasi web. Ini juga memperluas kemampuan rendering sisi server React, menambahkan Suspense ke server dan kemampuan untuk menjaga streaming konten ke pengguna Anda setelah render pertama. Ini memberi pengembang lebih banyak fleksibilitas untuk mendistribusikan rendering di kedua klien dan server.