preinit

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

• Reference
  • preinit(href, options)
• Usage
  • Render செய்யும்போது preinit செய்தல்
  • Event handler-இல் preinit செய்தல்

Reference

preinit(href, options)

Script அல்லது stylesheet ஒன்றை preinit செய்ய, react-dom-இலிருந்து preinit function-ஐ அழைக்கவும்.

import { preinit } from 'react-dom';

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

மேலும் உதாரணங்களை கீழே பார்க்கவும்.

கொடுக்கப்பட்ட resource-ஐ download செய்து execute செய்யத் தொடங்க வேண்டும் என்ற hint-ஐ preinit function browser-க்கு வழங்குகிறது; இது நேரத்தைச் சேமிக்கலாம். நீங்கள் preinit செய்யும் scripts download முடிந்ததும் execute செய்யப்படும். நீங்கள் preinit செய்யும் stylesheets document-க்குள் insert செய்யப்படும்; இதனால் அவை உடனே effect ஆகும்.

Parameters

• href: ஒரு string. Download செய்து execute செய்ய விரும்பும் resource-இன் URL.
• options: ஒரு object. இது பின்வரும் properties-ஐக் கொண்டுள்ளது:
  • as: அவசியமான string. Resource-இன் type. இதன் சாத்தியமான values script மற்றும் style.
  • precedence: ஒரு string. Stylesheets-க்கு அவசியம். மற்றவற்றுடன் ஒப்பிடும்போது stylesheet எங்கு insert செய்யப்பட வேண்டும் என்பதைச் சொல்கிறது. அதிக precedence கொண்ட stylesheets, குறைந்த precedence கொண்டவற்றை override செய்ய முடியும். சாத்தியமான values reset, low, medium, high.
  • crossOrigin: ஒரு string. பயன்படுத்த வேண்டிய CORS policy. இதன் சாத்தியமான values anonymous மற்றும் use-credentials.
  • integrity: ஒரு string. Resource-இன் நம்பகத்தன்மையை சரிபார்க்க அதன் cryptographic hash.
  • nonce: ஒரு string. கடுமையான Content Security Policy பயன்படுத்தும்போது resource-ஐ அனுமதிக்க cryptographic nonce.
  • fetchPriority: ஒரு string. Resource-ஐ fetch செய்வதற்கான relative priority-ஐ பரிந்துரைக்கிறது. சாத்தியமான values auto (default), high, மற்றும் low.

Returns

preinit எதையும் return செய்யாது.

Caveats

• அதே href-உடன் preinit-ஐ பலமுறை அழைப்பது, ஒருமுறை அழைப்பதற்குச் சமமான விளைவையே தரும்.
• Browser-இல் எந்த சூழலிலும் preinit-ஐ அழைக்கலாம்: component render ஆகும்போது, Effect-இல், event handler-இல், மற்றும் இதுபோன்ற இடங்களில்.
• Server-side rendering-இல் அல்லது Server Components render செய்யும்போது, component render ஆகும் நேரத்தில் அல்லது component render-இலிருந்து தொடங்கிய async context-இல் அழைத்தால் மட்டுமே preinit விளைவளிக்கும். மற்ற எல்லா calls-உம் புறக்கணிக்கப்படும்.

Usage

Render செய்யும்போது preinit செய்தல்

அந்த component அல்லது அதன் children குறிப்பிட்ட resource ஒன்றைப் பயன்படுத்தும் என்பது தெரிந்திருந்தால், மேலும் resource download ஆனவுடன் evaluate செய்யப்பட்டு உடனே effect ஆகுவது உங்களுக்கு ஏற்றதாக இருந்தால், component render செய்யும்போது preinit-ஐ அழைக்கவும்.

Event handler-இல் preinit செய்தல்

External resources தேவைப்படும் page அல்லது state-க்கு மாறுவதற்கு முன், event handler-இல் preinit-ஐ அழைக்கவும். புதிய page அல்லது state render ஆகும் போது அழைப்பதை விட, இது செயல்முறையை முன்கூட்டியே தொடங்குகிறது.

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