React ReactDOM: Visaptverošs ceļvedis par DOM renderēšanas utilītprogrammām

React ir jaudīga JavaScript bibliotēka lietotāja saskarņu veidošanai. Savā pamatā React abstrahē tiešu Dokumenta Objekta Modeļa (DOM) manipulāciju, ļaujot izstrādātājiem koncentrēties uz vēlamā UI stāvokļa aprakstīšanu. Tomēr pašam React ir nepieciešams veids, kā mijiedarboties ar pārlūkprogrammas DOM, lai šos UI aprakstus atdzīvinātu. Šeit talkā nāk ReactDOM. Šī pakotne nodrošina specifiskas metodes React komponentu renderēšanai DOM un to mijiedarbības pārvaldībai ar to.

Izpratne par ReactDOM lomu

ReactDOM darbojas kā tilts starp React uz komponentiem balstīto pasauli un pārlūkprogrammas DOM. Tā piedāvā funkcionalitāti, lai renderētu React komponentus konkrētos DOM mezglos, atjauninātu tos, kad mainās to dati, un pat noņemtu tos, kad tie vairs nav nepieciešami. Uztveriet to kā dzinēju, kas vada jūsu React lietojumprogrammas vizuālo attēlojumu pārlūkprogrammā.

Ir svarīgi atšķirt React un ReactDOM. React ir pamatbibliotēka komponentu izveidei un stāvokļa pārvaldībai. ReactDOM ir atbildīgs par šo komponentu paņemšanu un renderēšanu pārlūkprogrammas DOM. Lai gan React var izmantot citās vidēs (piemēram, React Native mobilo ierīču izstrādei, kas izmanto citu renderēšanas bibliotēku), ReactDOM ir īpaši paredzēts tīmekļa lietojumprogrammām.

Galvenās ReactDOM metodes

Izpētīsim dažas no vissvarīgākajām metodēm, ko nodrošina ReactDOM pakotne:

ReactDOM.render()

Metode ReactDOM.render() ir jebkuras React lietojumprogrammas pamats. Tā ir atbildīga par React komponenta (vai komponentu koka) pievienošanu (mounting) norādītajā DOM mezglā. Šis mezgls parasti ir tukšs HTML elements jūsu lapā.

Sintakse:

ReactDOM.render(element, container[, callback])

• element: React elements, kuru vēlaties renderēt. Parasti tas ir jūsu lietojumprogrammas augstākā līmeņa komponents.
• container: DOM elements, kurā vēlaties pievienot komponentu. Tam jābūt derīgam DOM mezglam jūsu HTML.
• callback (neobligāts): funkcija, kas tiks izpildīta pēc komponenta renderēšanas.

Piemērs:

Pieņemsim, ka jums ir vienkāršs React komponents ar nosaukumu App:

import React from 'react'; import ReactDOM from 'react-dom/client'; function App() { return ( <div> <h1>Hello, React!</h1> <p>This is a simple React component.</p> </div> ); }

Un HTML fails ar elementu, kura ID ir "root":

<div id="root"></div>

Lai renderētu App komponentu "root" elementā, jūs izmantotu:

const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />);

Svarīga piezīme (React 18 un jaunākās versijas): React 18 un jaunākās versijās ReactDOM.render tiek uzskatīta par novecojušu. Ieteicamā pieeja ir izmantot ReactDOM.createRoot, kā parādīts iepriekš. Tas ļauj izmantot jaunās vienlaicīgās funkcijas, kas ieviestas React 18.

Izpratne par atjauninājumiem: ReactDOM.render() ir atbildīgs arī par DOM atjaunināšanu, kad mainās komponenta dati. React izmanto virtuālo DOM, lai efektīvi salīdzinātu pašreizējo stāvokli ar vēlamo stāvokli un atjauninātu tikai nepieciešamās reālā DOM daļas, samazinot veiktspējas slodzi.

ReactDOM.hydrate()

ReactDOM.hydrate() tiek izmantots, kad jūs renderējat React lietojumprogrammu, kas jau ir renderēta uz servera. Šī ir galvenā tehnika, lai uzlabotu jūsu lietojumprogrammas sākotnējo ielādes veiktspēju un uzlabotu SEO.

Servera puses renderēšana (SSR): SSR gadījumā React komponenti tiek renderēti HTML formātā uz servera. Šis HTML pēc tam tiek nosūtīts uz pārlūkprogrammu, kas var nekavējoties parādīt sākotnējo saturu. Tomēr pārlūkprogrammai joprojām ir nepieciešams "hidratēt" lietojumprogrammu – tas ir, piesaistīt notikumu klausītājus un padarīt lietojumprogrammu interaktīvu. ReactDOM.hydrate() paņem servera renderēto HTML un piesaista tam React notikumu apstrādātājus, padarot lietojumprogrammu pilnībā funkcionālu.

Sintakse:

ReactDOM.hydrate(element, container[, callback])

Parametri ir tādi paši kā ReactDOM.render().

Piemērs:

Uz servera jūs renderētu savu React lietojumprogrammu kā teksta virkni:

import React from 'react'; import ReactDOMServer from 'react-dom/server'; import App from './App'; const html = ReactDOMServer.renderToString(<App />);

Šis HTML pēc tam tiktu nosūtīts klientam.

Klienta pusē jūs izmantotu ReactDOM.hydrate(), lai piesaistītu React notikumu apstrādātājus:

import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.hydrate(<App />);

Hidratācijas priekšrocības:

• Uzlabots sākotnējais ielādes laiks: Lietotāji redz saturu nekavējoties, pat pirms JavaScript koda pilnīgas ielādes.
• Uzlabots SEO: Meklētājprogrammas var pārmeklēt un indeksēt pilnībā renderētu HTML.

ReactDOM.unmountComponentAtNode()

ReactDOM.unmountComponentAtNode() tiek izmantots, lai noņemtu pievienotu komponentu no DOM. Tas var būt noderīgi, ja jums ir dinamiski jānoņem daļas no jūsu UI vai ja jūs tīrāt resursus pirms navigācijas uz citu lapu.

Sintakse:

ReactDOM.unmountComponentAtNode(container)

• container: DOM elements, kurā komponents ir pievienots.

Piemērs:

import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; const rootElement = document.getElementById('root'); const root = ReactDOM.createRoot(rootElement); root.render(<App />); // Vēlāk, lai noņemtu komponentu: root.unmount();

Pēc ReactDOM.unmountComponentAtNode(rootElement) izsaukšanas, App komponents tiks noņemts no DOM, un visi ar to saistītie notikumu klausītāji un resursi tiks notīrīti.

Kad lietot:

• Noņemot modālo logu vai dialogu no UI.
• Tīrot komponentu pirms navigācijas uz citu lapu.
• Dinamiski pārslēdzoties starp dažādiem komponentiem.

ReactDOM.findDOMNode() (Novecojusi)

Svarīgi: ReactDOM.findDOMNode() tiek uzskatīta par novecojušu un nav ieteicama lietošanai mūsdienu React lietojumprogrammās. Tā agrāk tika izmantota, lai piekļūtu pamatā esošajam DOM mezglam no pievienota komponenta. Tomēr tās lietošana nav ieteicama, jo tā pārkāpj React abstrakciju un var izraisīt neparedzamu uzvedību, īpaši līdz ar funkcionālo komponentu un "hooks" ieviešanu.

Alternatīvas pieejas:

Tā vietā, lai izmantotu ReactDOM.findDOMNode(), apsveriet šīs alternatīvās pieejas:

• Atsauces (Refs): Izmantojiet React atsauces, lai tieši piekļūtu DOM mezgliem. Šī ir ieteicamā pieeja mijiedarbībai ar DOM elementiem.
• Kontrolēti komponenti: Padariet savus komponentus "kontrolētus", pārvaldot to stāvokli ar React. Tas ļauj jums manipulēt ar UI, tieši nepiekļūstot DOM.
• Notikumu apstrādātāji: Pievienojiet notikumu apstrādātājus saviem komponentiem un izmantojiet notikuma objektu, lai piekļūtu mērķa DOM elementam.

Vienlaicīgums (Concurrency) React 18 un ReactDOM

React 18 ievieš vienlaicīgumu, jaunu mehānismu, kas ļauj React pārtraukt, apturēt, atsākt vai atmest renderēšanas uzdevumus. Tas paver jaudīgas funkcijas, piemēram, pārejas un selektīvo hidratāciju, nodrošinot vienmērīgāku un atsaucīgāku lietotāja pieredzi.

Ietekme uz ReactDOM: ReactDOM.createRoot pieņemšana ir izšķiroša, lai izmantotu vienlaicīguma priekšrocības. Šī metode izveido sakni, no kuras tiek renderēta jūsu lietojumprogramma, ļaujot React efektīvāk pārvaldīt renderēšanas uzdevumus.

Pārejas (Transitions): Pārejas ļauj atzīmēt noteiktus stāvokļa atjauninājumus kā nesteidzamus, ļaujot React prioritizēt svarīgākus atjauninājumus un uzturēt atsaucību. Piemēram, pārvietojoties starp maršrutiem, jūs varat atzīmēt maršruta pāreju kā nesteidzamu atjauninājumu, nodrošinot, ka UI paliek atsaucīgs pat datu ielādes laikā.

Selektīvā hidratācija: Ar selektīvo hidratāciju React var hidratēt atsevišķus komponentus pēc pieprasījuma, nevis hidratēt visu lietojumprogrammu uzreiz. Tas ievērojami uzlabo sākotnējo ielādes laiku lielām lietojumprogrammām.

Globāli apsvērumi par React ReactDOM

Izstrādājot React lietojumprogrammas globālai auditorijai, ir svarīgi ņemt vērā tādus faktorus kā starptautiskošana (i18n) un lokalizācija (l10n). Pats ReactDOM tieši nenodarbojas ar šiem aspektiem, bet ir būtiski to integrēt ar i18n bibliotēkām un labākajām praksēm.

• Starptautiskošana (i18n): Lietojumprogrammu projektēšanas un izstrādes process, kas ļauj tās pielāgot dažādām valodām un reģioniem, neprasot inženiertehniskas izmaiņas.
• Lokalizācija (l10n): Starptautiskotas lietojumprogrammas pielāgošanas process konkrētai valodai vai reģionam, tulkojot tekstu, pielāgojot formatējumu un risinot kultūras atšķirības.

i18n bibliotēku izmantošana:

Bibliotēkas, piemēram, react-i18next un globalize, nodrošina rīkus tulkojumu pārvaldībai, datuma un laika formatēšanai un citiem ar lokalizāciju saistītiem uzdevumiem. Šīs bibliotēkas parasti nemanāmi integrējas ar React un ReactDOM.

Piemērs ar react-i18next:

import React from 'react'; import { useTranslation } from 'react-i18next'; function MyComponent() { const { t } = useTranslation(); return ( <div> <h1>{t('greeting')}</h1> <p>{t('description')}</p> </div> ); }

Šajā piemērā useTranslation "hook" nodrošina piekļuvi tulkošanas funkcijai t, kas iegūst atbilstošo tulkojumu dotajai atslēgai. Paši tulkojumi parasti tiek glabāti atsevišķos failos katrai valodai.

No labās uz kreiso (RTL) izkārtojums:

Dažas valodas, piemēram, arābu un ebreju, tiek rakstītas no labās uz kreiso. Izstrādājot lietojumprogrammas šīm valodām, jums ir jānodrošina, ka jūsu UI atbalsta RTL izkārtojumu. Tas parasti ietver teksta virziena pielāgošanu, komponentu izkārtojuma spoguļošanu un divvirzienu teksta apstrādi.

Labākās prakses ReactDOM lietošanai

Lai nodrošinātu efektīvas un uzturamas React lietojumprogrammas, ievērojiet šīs labākās prakses, lietojot ReactDOM:

• Izmantojiet ReactDOM.createRoot React 18 un jaunākās versijās: tas ir ieteicamais veids, kā renderēt jūsu lietojumprogrammu un izmantot vienlaicīguma priekšrocības.
• Izvairieties no tiešas DOM manipulācijas: ļaujiet React pārvaldīt DOM. Tieša DOM manipulācija var radīt neatbilstības un veiktspējas problēmas.
• Izmantojiet atsauces (refs) taupīgi: izmantojiet atsauces tikai tad, ja nepieciešams tieši piekļūt DOM mezgliem konkrētiem mērķiem, piemēram, fokusējot ievades elementu.
• Optimizējiet renderēšanas veiktspēju: izmantojiet tādas metodes kā memoizācija un shouldComponentUpdate, lai novērstu nevajadzīgas atkārtotas renderēšanas.
• Apsveriet servera puses renderēšanu, lai uzlabotu veiktspēju un SEO.
• Izmantojiet i18n bibliotēkas starptautiskošanai un lokalizācijai.
• Rūpīgi pārbaudiet savu lietojumprogrammu dažādās pārlūkprogrammās un ierīcēs.

Secinājums

ReactDOM ir būtiska React ekosistēmas daļa, kas nodrošina tiltu starp React komponentiem un pārlūkprogrammas DOM. Izprotot galvenās metodes, piemēram, ReactDOM.render(), ReactDOM.hydrate() un ReactDOM.unmountComponentAtNode(), un pieņemot labākās prakses, jūs varat veidot veiktspējīgas, uzturamas un globāli pieejamas React lietojumprogrammas. Līdz ar vienlaicīguma ieviešanu React 18, ReactDOM.createRoot pieņemšana ir izšķiroša, lai atvērtu jaunus veiktspējas un atsaucības līmeņus. Atcerieties apsvērt starptautiskošanas un lokalizācijas labākās prakses, veidojot lietojumprogrammas globālai auditorijai, lai radītu patiesi iekļaujošu un pieejamu lietotāja pieredzi.