React ReactDOM: Išsamus DOM atvaizdavimo įrankių vadovas

React yra galinga JavaScript biblioteka, skirta vartotojo sąsajoms kurti. Iš esmės, React abstrahuoja tiesioginį dokumento objekto modelio (DOM) manipuliavimą, leisdama kūrėjams susitelkti ties norimos vartotojo sąsajos būsenos aprašymu. Tačiau pačiam React reikia būdo sąveikauti su naršyklės DOM, kad šie vartotojo sąsajos aprašymai atgytų. Būtent čia ir pasirodo ReactDOM. Šis paketas suteikia konkrečius metodus, skirtus React komponentams atvaizduoti DOM'e ir valdyti jų sąveiką su juo.

Supraskime ReactDOM vaidmenį

ReactDOM veikia kaip tiltas tarp React komponentais pagrįsto pasaulio ir naršyklės DOM. Jis siūlo funkcijas, leidžiančias atvaizduoti React komponentus konkrečiuose DOM mazguose, juos atnaujinti, kai pasikeičia jų duomenys, ir net pašalinti, kai jų nebereikia. Galima tai įsivaizduoti kaip variklį, kuris valdo vizualų jūsų React programos atvaizdavimą naršyklėje.

Svarbu atskirti React nuo ReactDOM. React yra pagrindinė biblioteka, skirta komponentams kurti ir būsenai valdyti. ReactDOM yra atsakingas už tų komponentų paėmimą ir atvaizdavimą naršyklės DOM. Nors React gali būti naudojamas ir kitose aplinkose (pavyzdžiui, React Native mobiliųjų programų kūrimui, kuri naudoja kitą atvaizdavimo biblioteką), ReactDOM yra specialiai sukurtas žiniatinklio programoms.

Pagrindiniai ReactDOM metodai

Panagrinėkime keletą svarbiausių ReactDOM paketo teikiamų metodų:

ReactDOM.render()

Metodas ReactDOM.render() yra bet kurios React programos pamatas. Jis atsakingas už React komponento (arba komponentų medžio) prijungimą prie nurodyto DOM mazgo. Šis mazgas paprastai yra tuščias HTML elementas jūsų puslapyje.

Sintaksė:

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

• element: React elementas, kurį norite atvaizduoti. Paprastai tai yra aukščiausio lygio jūsų programos komponentas.
• container: DOM elementas, kuriame norite prijungti komponentą. Tai turi būti galiojantis DOM mazgas jūsų HTML.
• callback (neprivaloma): Funkcija, kuri bus įvykdyta po to, kai komponentas bus atvaizduotas.

Pavyzdys:

Tarkime, turite paprastą React komponentą, pavadintą 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> ); }

Ir HTML failą su elementu, kurio ID yra „root“:

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

Norėdami atvaizduoti App komponentą „root“ elemente, naudotumėte:

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

Svarbi pastaba (React 18 ir naujesnės versijos): React 18 ir naujesnėse versijose ReactDOM.render yra laikomas pasenusiu. Rekomenduojamas būdas yra naudoti ReactDOM.createRoot, kaip parodyta aukščiau. Tai įgalina naujas lygiagretumo funkcijas, pristatytas React 18.

Atnaujinimų supratimas: ReactDOM.render() taip pat yra atsakingas už DOM atnaujinimą, kai pasikeičia komponento duomenys. React naudoja virtualų DOM, kad efektyviai palygintų esamą būseną su norima būsena ir atnaujintų tik būtinas realaus DOM dalis, taip sumažindamas našumo sąnaudas.

ReactDOM.hydrate()

ReactDOM.hydrate() naudojamas, kai atvaizduojate React programą, kuri jau buvo atvaizduota serveryje. Tai yra pagrindinė technika, skirta pagerinti pradinį jūsų programos įkėlimo našumą ir pagerinti SEO.

Serverio pusės atvaizdavimas (SSR): Naudojant SSR, React komponentai yra atvaizduojami į HTML serveryje. Šis HTML tada siunčiamas į naršyklę, kuri gali nedelsiant parodyti pradinį turinį. Tačiau naršyklei vis tiek reikia „hidratuoti“ programą – tai yra, prijungti įvykių klausytojus ir padaryti programą interaktyvia. ReactDOM.hydrate() paima serveryje atvaizduotą HTML ir prijungia prie jo React įvykių tvarkykles, padarydamas programą visiškai veikiančia.

Sintaksė:

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

Parametrai yra tokie patys kaip ir ReactDOM.render().

Pavyzdys:

Serveryje jūs atvaizduotumėte savo React programą į eilutę:

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

Šis HTML tada būtų išsiųstas klientui.

Kliento pusėje, jūs naudotumėte ReactDOM.hydrate(), kad prijungtumėte React įvykių tvarkykles:

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

Hidratacijos privalumai:

• Pagerintas pradinis įkėlimo laikas: Vartotojai mato turinį nedelsiant, dar prieš visiškai įkeliant JavaScript kodą.
• Pagerintas SEO: Paieškos sistemos gali nuskaityti ir indeksuoti pilnai atvaizduotą HTML.

ReactDOM.unmountComponentAtNode()

ReactDOM.unmountComponentAtNode() naudojamas prijungtam komponentui pašalinti iš DOM. Tai gali būti naudinga, kai reikia dinamiškai pašalinti dalis savo vartotojo sąsajos arba kai valote resursus prieš pereinant į kitą puslapį.

Sintaksė:

ReactDOM.unmountComponentAtNode(container)

• container: DOM elementas, kuriame prijungtas komponentas.

Pavyzdys:

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ėliau, norint atjungti komponentą: root.unmount();

Iškvietus ReactDOM.unmountComponentAtNode(rootElement), App komponentas bus pašalintas iš DOM, o visi su juo susiję įvykių klausytojai ir resursai bus išvalyti.

Kada naudoti:

• Modalinio lango ar dialogo pašalinimas iš vartotojo sąsajos.
• Komponento išvalymas prieš pereinant į kitą puslapį.
• Dinamiškas perjungimas tarp skirtingų komponentų.

ReactDOM.findDOMNode() (pasenęs)

Svarbu: ReactDOM.findDOMNode() yra laikomas pasenusiu ir nerekomenduojamas naudoti šiuolaikinėse React programose. Anksčiau jis buvo naudojamas norint pasiekti prijungto komponento pagrindinį DOM mazgą. Tačiau jo naudojimas yra nerekomenduojamas, nes jis pažeidžia React abstrakciją ir gali sukelti nenuspėjamą elgesį, ypač įdiegus funkcinius komponentus ir „hooks“.

Alternatyvūs būdai:

Vietoj ReactDOM.findDOMNode(), apsvarstykite šiuos alternatyvius būdus:

• Refs: Naudokite React „refs“, kad tiesiogiai pasiektumėte DOM mazgus. Tai yra rekomenduojamas būdas sąveikauti su DOM elementais.
• Valdomi komponentai: Padarykite savo komponentus „valdomais“, valdydami jų būseną su React. Tai leidžia manipuliuoti vartotojo sąsaja, tiesiogiai nepasiekiant DOM.
• Įvykių tvarkyklės: Prijunkite įvykių tvarkykles prie savo komponentų ir naudokite įvykio objektą, kad pasiektumėte tikslinį DOM elementą.

Lygiagretumas React 18 ir ReactDOM

React 18 pristato lygiagretumą – naują mechanizmą, leidžiantį React pertraukti, pristabdyti, tęsti ar atsisakyti atvaizdavimo užduočių. Tai atveria galingas funkcijas, tokias kaip perėjimai (transitions) ir selektyvi hidratacija, kurios užtikrina sklandesnę ir jautresnę vartotojo patirtį.

Poveikis ReactDOM: ReactDOM.createRoot pritaikymas yra labai svarbus norint pasinaudoti lygiagretumo privalumais. Šis metodas sukuria šaknį, iš kurios atvaizduojama jūsų programa, leidžiant React efektyviau valdyti atvaizdavimo užduotis.

Perėjimai (Transitions): Perėjimai leidžia pažymėti tam tikrus būsenos atnaujinimus kaip neskubius, leisdami React teikti pirmenybę svarbesniems atnaujinimams ir išlaikyti reaktyvumą. Pavyzdžiui, naršant tarp maršrutų, galite pažymėti maršruto perėjimą kaip neskubų atnaujinimą, užtikrindami, kad vartotojo sąsaja išliktų jautri net ir duomenų gavimo metu.

Selektyvi hidratacija: Su selektyvia hidratacija, React gali hidratuoti atskirus komponentus pagal poreikį, o ne hidratuoti visą programą iš karto. Tai žymiai pagerina didelių programų pradinį įkėlimo laiką.

Globalūs aspektai dirbant su React ReactDOM

Kuriant React programas pasaulinei auditorijai, svarbu atsižvelgti į tokius veiksnius kaip internacionalizacija (i18n) ir lokalizacija (l10n). Pats ReactDOM tiesiogiai nesprendžia šių aspektų, tačiau labai svarbu jį integruoti su i18n bibliotekomis ir geriausiomis praktikomis.

• Internacionalizacija (i18n): Programų projektavimo ir kūrimo procesas, kurio metu programos gali būti pritaikytos skirtingoms kalboms ir regionams, nereikalaujant inžinerinių pakeitimų.
• Lokalizacija (l10n): Internacionalizuotos programos pritaikymo konkrečiai kalbai ar regionui procesas, verčiant tekstą, koreguojant formatavimą ir atsižvelgiant į kultūrinius skirtumus.

i18n bibliotekų naudojimas:

Bibliotekos, tokios kaip react-i18next ir globalize, suteikia įrankius vertimams, datos ir laiko formatavimui bei kitoms su lokalizacija susijusioms užduotims valdyti. Šios bibliotekos paprastai sklandžiai integruojasi su React ir ReactDOM.

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

Šiame pavyzdyje useTranslation „hook“ suteikia prieigą prie vertimo funkcijos t, kuri paima atitinkamą vertimą pagal nurodytą raktą. Patys vertimai paprastai yra saugomi atskiruose failuose kiekvienai kalbai.

Iš dešinės į kairę (RTL) išdėstymas:

Kai kurios kalbos, pavyzdžiui, arabų ir hebrajų, rašomos iš dešinės į kairę. Kuriant programas šioms kalboms, reikia užtikrinti, kad jūsų vartotojo sąsaja palaikytų RTL išdėstymą. Tai paprastai apima teksto krypties koregavimą, komponentų išdėstymo veidrodinį atspindėjimą ir dvikrypčio teksto tvarkymą.

Geriausios ReactDOM naudojimo praktikos

Norėdami užtikrinti efektyvias ir prižiūrimas React programas, laikykitės šių geriausių praktikų, kai naudojate ReactDOM:

• Naudokite ReactDOM.createRoot React 18 ir naujesnėse versijose: Tai rekomenduojamas būdas atvaizduoti jūsų programą ir pasinaudoti lygiagretumo privalumais.
• Venkite tiesioginio DOM manipuliavimo: Leiskite React valdyti DOM. Tiesioginis DOM manipuliavimas gali sukelti neatitikimų ir našumo problemų.
• Saikingai naudokite „refs“: Naudokite „refs“ tik tada, kai reikia tiesiogiai pasiekti DOM mazgus konkretiems tikslams, pavyzdžiui, fokusuojant įvesties elementą.
• Optimizuokite atvaizdavimo našumą: Naudokite tokias technikas kaip memoizacija ir shouldComponentUpdate, kad išvengtumėte nereikalingų peratvaizdavimų.
• Apsvarstykite serverio pusės atvaizdavimą siekiant geresnio našumo ir SEO.
• Naudokite i18n bibliotekas internacionalizacijai ir lokalizacijai.
• Išsamiai testuokite savo programą skirtingose naršyklėse ir įrenginiuose.

Išvada

ReactDOM yra esminė React ekosistemos dalis, suteikianti tiltą tarp React komponentų ir naršyklės DOM. Suprasdami pagrindinius metodus, tokius kaip ReactDOM.render(), ReactDOM.hydrate() ir ReactDOM.unmountComponentAtNode(), ir taikydami geriausias praktikas, galite kurti našias, prižiūrimas ir visame pasaulyje prieinamas React programas. Įdiegus lygiagretumą React 18, ReactDOM.createRoot pritaikymas yra labai svarbus norint pasiekti naujus našumo ir reaktyvumo lygius. Kuriant pasaulinei auditorijai, nepamirškite atsižvelgti į internacionalizacijos ir lokalizacijos geriausias praktikas, kad sukurtumėte tikrai įtraukiančias ir prieinamas vartotojo patirtis.