Canary

Fungsi preinit saat ini hanya tersedia di kanal Canary dan eksperimental React. Pelajari lebih lanjut tentang kanal rilis React di sini.

Catatan

Framework berbasis React sering kali menangani pemuatan sumber daya untuk Anda, jadi Anda mungkin tidak perlu memanggil API ini sendiri. Lihat dokumentasi framework Anda untuk detailnya.

preinit memungkinkan Anda mengambil dan mengevaluasi stylesheet atau skrip eksternal dengan cepat.

preinit("https://example.com/script.js", {as: "script"});

Referensi

preinit(href, options)

Untuk melakukan inisialisasi terhadap sebuah skrip atau stylesheet, panggil fungsi preinit dari react-dom.

import { preinit } from 'react-dom';

function AppRoot() {
  preinit("https://example.com/script.js", {as: "script"});
  // ...
}

Lihat contoh lainnya di bawah ini.

Fungsi preinit memberikan petunjuk kepada browser bahwa untuk mulai mengunduh dan mengeksekusi sumber daya yang diberikan, yang dapat menghemat waktu. Skrip yang kamu preinit akan dieksekusi segera setelah selesai diunduh. Stylesheet yang kamu preinit akan langsung dimasukkan ke dalam dokumen, sehingga langsung berlaku saat itu juga.

Parameter

  • href: sebuah string. URL sumber daya yang ingin Anda unduh dan jalankan.
  • options: sebuah objek. Ini berisi properti-properti berikut:
    • as: sebuah string yang wajib. Jenis sumber daya. Nilai yang dapat digunakan adalah script and style.
    • precedence: sebuah string. Wajib diisi untuk stylesheet. Menunjukkan di mana stylesheet akan disisipkan relatif terhadap stylesheet lainnya. Stylesheet dengan prioritas lebih tinggi dapat menimpa(override) stylesheet dengan prioritas lebih rendah. Nilai yang memungkinkan adalah: reset, low, medium, high.
    • crossOrigin: sebuah string. Kebijakan CORS yang akan digunakan. Nilai yang dapat digunakan adalah anonymous dan use-credentials.
    • integrity: sebuah string. Hash kriptografi sumber daya, untuk memverifikasi keasliannya.
    • nonce: sebuah string. Sebuah nonce kriptografi untuk mengizinkan sumber daya ketika menggunakan Content Security Policy yang ketat.
    • fetchPriority: sebuah string. Menyarankan prioritas relatif untuk mengambil sumber daya. Nilai yang dapat digunakan adalah auto (default), high, dan low.

Kembalian

preinit tidak mengembalikan apa pun.

Peringatan

  • Beberapa pemanggilan preinit dengan href memiliki efek yang sama dengan panggilan tunggal.
  • Di browser, Anda dapat memanggil preinit dalam situasi apa pun: saat me-render komponen, di Effect, di event handler, dan sebagainya.
  • Dalam rendering sisi server atau saat me-render Komponen Server, preinit hanya memiliki efek jika Anda memanggilnya saat me-render komponen atau dalam konteks asinkronisasi yang berasal dari rendering komponen. Pemanggilan lainnya akan diabaikan.

Penggunaan

Preiniting awal saat me-render

Panggil preinit saat me-render komponen jika Anda mengetahui bahwa komponen tersebut atau anak komponennya akan menggunakan sumber daya tertentu, dan Anda setuju sumber daya tersebut langsung dievaluasi serta berlaku segera setelah selesai diunduh.

Examples of preiniting

Contoh 1 dari 2:
Preiniting skrip eksternal 

import { preinit } from 'react-dom';

function AppRoot() {
  preinit("https://example.com/script.js", {as: "script"});
  return ...;
}

Jika Anda ingin agar browser hanya mengunduh skrip tanpa langsung mengeksekusinya, gunakan preload. Jika Anda ingin memuat modul ESM, gunakan preinitModule.

Preiniting pada event handler

Panggil preinit dalam event handler sebelum bertransisi ke halaman atau state yang membutuhkan sumber daya eksternal. Hal ini akan memulai proses lebih awal dibandingkan jika Anda memanggilnya saat merender halaman atau state baru.

import { preinit } from 'react-dom';

function CallToAction() {
  const onClick = () => {
    preinit("https://example.com/wizardStyles.css", {as: "style"});
    startWizard();
  }
  return (
    <button onClick={onClick}>Start Wizard</button>
  );
}
SebelumnyaprefetchDNS
SelanjutnyapreinitModule