React ReactDOM: DOM ரெண்டரிங் பயன்பாடுகளுக்கான ஒரு விரிவான வழிகாட்டி

ரியாக்ட் (React) என்பது பயனர் இடைமுகங்களை உருவாக்குவதற்கான ஒரு சக்திவாய்ந்த ஜாவாஸ்கிரிப்ட் லைப்ரரி ஆகும். இதன் மையத்தில், ரியாக்ட் டாக்குமென்ட் ஆப்ஜெக்ட் மாடல் (DOM)-ஐ நேரடியாகக் கையாளுவதிலிருந்து டெவலப்பர்களை விடுவிக்கிறது, இது அவர்களின் UI-இன் விரும்பிய நிலையை விவரிப்பதில் கவனம் செலுத்த அனுமதிக்கிறது. இருப்பினும், இந்த UI விளக்கங்களை உயிர்ப்பிக்க ரியாக்டுக்கு உலாவியின் DOM உடன் தொடர்பு கொள்ள ஒரு வழி தேவைப்படுகிறது. இங்குதான் ReactDOM வருகிறது. இந்த பேக்கேஜ், ரியாக்ட் காம்போனென்ட்களை DOM-இல் ரெண்டர் செய்வதற்கும், அவற்றுடனான அதன் தொடர்புகளை நிர்வகிப்பதற்கும் குறிப்பிட்ட மெத்தட்களை வழங்குகிறது.

ReactDOM-இன் பங்கை புரிந்துகொள்ளுதல்

ReactDOM, ரியாக்ட்டின் காம்போனென்ட்-அடிப்படையிலான உலகத்திற்கும் உலாவியின் DOM-க்கும் இடையே ஒரு பாலமாக செயல்படுகிறது. இது ரியாக்ட் காம்போனென்ட்களை குறிப்பிட்ட DOM நோட்களில் ரெண்டர் செய்யவும், அவற்றின் தரவு மாறும்போது அவற்றைப் புதுப்பிக்கவும், தேவைப்படாதபோது அவற்றை அகற்றவும் செயல்பாடுகளை வழங்குகிறது. இதை உங்கள் ரியாக்ட் பயன்பாட்டின் காட்சிப் பிரதிநிதித்துவத்தை உலாவியில் இயக்கும் ஒரு இயந்திரமாக நினைத்துப் பாருங்கள்.

ரியாக்ட் மற்றும் ReactDOM-ஐ வேறுபடுத்துவது முக்கியம். ரியாக்ட் என்பது காம்போனென்ட்களை உருவாக்குவதற்கும் ஸ்டேட்டை (state) நிர்வகிப்பதற்கும் உள்ள முக்கிய லைப்ரரி ஆகும். ReactDOM அந்த காம்போனென்ட்களை எடுத்து உலாவியின் DOM-இல் ரெண்டர் செய்வதற்குப் பொறுப்பாகும். ரியாக்ட் மற்ற சூழல்களிலும் (மொபைல் மேம்பாட்டிற்கான ரியாக்ட் நேட்டிவ் போன்றவை, இது வேறு ரெண்டரிங் லைப்ரரியைப் பயன்படுத்துகிறது) பயன்படுத்தப்படலாம் என்றாலும், ReactDOM குறிப்பாக வலைப் பயன்பாடுகளுக்காக வடிவமைக்கப்பட்டுள்ளது.

முக்கிய ReactDOM மெத்தட்கள்

ReactDOM பேக்கேஜ் வழங்கும் சில மிக முக்கியமான மெத்தட்களை ஆராய்வோம்:

ReactDOM.render()

ReactDOM.render() மெத்தட் எந்தவொரு ரியாக்ட் பயன்பாட்டின் அடித்தளமாகும். இது ஒரு ரியாக்ட் காம்போனென்ட்டை (அல்லது காம்போனென்ட்களின் ஒரு தொகுப்பை) ஒரு குறிப்பிட்ட DOM நோடில் மவுண்ட் (mount) செய்வதற்கு பொறுப்பாகும். இந்த நோட் பொதுவாக உங்கள் பக்கத்தில் உள்ள ஒரு காலி HTML எலிமென்ட் ஆகும்.

தொடரியல்:

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

• element: நீங்கள் ரெண்டர் செய்ய விரும்பும் ரியாக்ட் எலிமென்ட். இது பொதுவாக உங்கள் பயன்பாட்டின் உயர்-நிலை காம்போனென்ட் ஆகும்.
• container: நீங்கள் காம்போனென்ட்டை மவுண்ட் செய்ய விரும்பும் DOM எலிமென்ட். இது உங்கள் HTML-இல் உள்ள ஒரு சரியான DOM நோடாக இருக்க வேண்டும்.
• callback (விரும்பினால்): காம்போனென்ட் ரெண்டர் செய்யப்பட்ட பிறகு செயல்படுத்தப்படும் ஒரு ஃபங்ஷன்.

எடுத்துக்காட்டு:

உங்களிடம் 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> ); }

மேலும் "root" என்ற ஐடியுடன் ஒரு HTML ஃபைல் உள்ளது:

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

App காம்போனென்ட்டை "root" எலிமென்ட்டில் ரெண்டர் செய்ய, நீங்கள் இதைப் பயன்படுத்துவீர்கள்:

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

முக்கிய குறிப்பு (ரியாக்ட் 18 மற்றும் அதற்குப் பிறகு): ரியாக்ட் 18 மற்றும் அதற்குப் பிந்தைய பதிப்புகளில், ReactDOM.render ஒரு லெகசி (legacy) முறையாகக் கருதப்படுகிறது. மேலே காட்டப்பட்டுள்ளபடி ReactDOM.createRoot ஐப் பயன்படுத்துவதே பரிந்துரைக்கப்படும் அணுகுமுறையாகும். இது ரியாக்ட் 18-இல் அறிமுகப்படுத்தப்பட்ட புதிய கன்கரென்ட் (concurrent) அம்சங்களை செயல்படுத்துகிறது.

புதுப்பிப்புகளைப் புரிந்துகொள்ளுதல்: ReactDOM.render() காம்போனென்ட்டின் தரவு மாறும்போது DOM-ஐப் புதுப்பிப்பதற்கும் பொறுப்பாகும். ரியாக்ட் ஒரு விர்ச்சுவல் DOM-ஐப் பயன்படுத்தி தற்போதைய நிலையை விரும்பிய நிலையுடன் திறமையாக ஒப்பிட்டு, உண்மையான DOM-இன் தேவையான பகுதிகளை மட்டுமே புதுப்பிக்கிறது, இது செயல்திறன் மேல்சுமையைக் குறைக்கிறது.

ReactDOM.hydrate()

ReactDOM.hydrate() என்பது ஏற்கனவே சர்வரில் ரெண்டர் செய்யப்பட்ட ஒரு ரியாக்ட் பயன்பாட்டை நீங்கள் ரெண்டர் செய்யும்போது பயன்படுத்தப்படுகிறது. இது உங்கள் பயன்பாட்டின் ஆரம்ப ஏற்றுதல் செயல்திறனை மேம்படுத்துவதற்கும் SEO-ஐ மேம்படுத்துவதற்கும் ஒரு முக்கிய நுட்பமாகும்.

சர்வர்-சைட் ரெண்டரிங் (SSR): SSR-இல், ரியாக்ட் காம்போனென்ட்கள் சர்வரில் HTML ஆக ரெண்டர் செய்யப்படுகின்றன. இந்த HTML பின்னர் உலாவிக்கு அனுப்பப்படுகிறது, இது ஆரம்ப உள்ளடக்கத்தை உடனடியாகக் காட்ட முடியும். இருப்பினும், உலாவி இன்னும் பயன்பாட்டை "ஹைட்ரேட்" செய்ய வேண்டும் – அதாவது, ஈவன்ட் லிஸனர்களை இணைத்து பயன்பாட்டை ஊடாடும் வகையில் மாற்ற வேண்டும். ReactDOM.hydrate() சர்வரில் ரெண்டர் செய்யப்பட்ட HTML-ஐ எடுத்து, அதனுடன் ரியாக்ட் ஈவன்ட் ஹேண்ட்லர்களை இணைத்து, பயன்பாட்டை முழுமையாகச் செயல்பட வைக்கிறது.

தொடரியல்:

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

அளவுருக்கள் ReactDOM.render() போலவே இருக்கும்.

எடுத்துக்காட்டு:

சர்வரில், உங்கள் ரியாக்ட் பயன்பாட்டை ஒரு ஸ்டிரிங்கிற்கு ரெண்டர் செய்வீர்கள்:

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

இந்த HTML பின்னர் கிளைண்டிற்கு அனுப்பப்படும்.

கிளைண்ட்-சைடில், ரியாக்ட் ஈவன்ட் ஹேண்ட்லர்களை இணைக்க நீங்கள் ReactDOM.hydrate() ஐப் பயன்படுத்துவீர்கள்:

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

ஹைட்ரேஷனின் நன்மைகள்:

• மேம்படுத்தப்பட்ட ஆரம்ப ஏற்றுதல் நேரம்: ஜாவாஸ்கிரிப்ட் கோட் முழுமையாக ஏற்றப்படுவதற்கு முன்பே பயனர்கள் உள்ளடக்கத்தை உடனடியாகப் பார்க்கிறார்கள்.
• மேம்படுத்தப்பட்ட SEO: தேடுபொறிகள் முழுமையாக ரெண்டர் செய்யப்பட்ட HTML-ஐ கிரால் செய்து இன்டெக்ஸ் செய்ய முடியும்.

ReactDOM.unmountComponentAtNode()

ReactDOM.unmountComponentAtNode() என்பது மவுண்ட் செய்யப்பட்ட காம்போனென்ட்டை DOM-இலிருந்து அகற்றப் பயன்படுகிறது. உங்கள் UI-இன் சில பகுதிகளை டைனமிக்காக அகற்ற வேண்டியிருக்கும் போது அல்லது ஒரு பக்கத்திலிருந்து வெளியேறுவதற்கு முன்பு ஆதாரங்களை சுத்தம் செய்யும்போது இது பயனுள்ளதாக இருக்கும்.

தொடரியல்:

ReactDOM.unmountComponentAtNode(container)

• container: காம்போனென்ட் மவுண்ட் செய்யப்பட்ட DOM எலிமென்ட்.

எடுத்துக்காட்டு:

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 />); // Later, to unmount the component: root.unmount();

ReactDOM.unmountComponentAtNode(rootElement) ஐ அழைத்த பிறகு, App காம்போனென்ட் DOM-இலிருந்து அகற்றப்படும், மேலும் அதனுடன் தொடர்புடைய அனைத்து ஈவன்ட் லிஸனர்களும் ஆதாரங்களும் சுத்தம் செய்யப்படும்.

எப்போது பயன்படுத்த வேண்டும்:

• UI-இலிருந்து ஒரு மோடல் அல்லது டைலாக்கை அகற்றுதல்.
• வேறு பக்கத்திற்குச் செல்வதற்கு முன்பு ஒரு காம்போனென்ட்டை சுத்தம் செய்தல்.
• டைனமிக்காக வெவ்வேறு காம்போனென்ட்களுக்கு இடையே மாறுதல்.

ReactDOM.findDOMNode() (லெகசி)

முக்கியம்: ReactDOM.findDOMNode() ஒரு லெகசி முறையாகக் கருதப்படுகிறது மற்றும் நவீன ரியாக்ட் பயன்பாடுகளில் பயன்படுத்தப் பரிந்துரைக்கப்படவில்லை. இது முன்பு ஒரு மவுண்ட் செய்யப்பட்ட காம்போனென்ட்டின் அடிப்படை DOM நோடை அணுகப் பயன்படுத்தப்பட்டது. இருப்பினும், அதன் பயன்பாடு ஊக்கப்படுத்தப்படவில்லை, ஏனெனில் இது ரியாக்ட்டின் அப்ஸ்ட்ராக்ஷனை உடைக்கிறது மற்றும் கணிக்க முடியாத நடத்தைக்கு வழிவகுக்கும், குறிப்பாக ஃபங்ஷனல் காம்போனென்ட்கள் மற்றும் ஹூக்ஸ் அறிமுகத்துடன்.

மாற்று அணுகுமுறைகள்:

ReactDOM.findDOMNode() ஐப் பயன்படுத்துவதற்குப் பதிலாக, இந்த மாற்று அணுகுமுறைகளைக் கவனியுங்கள்:

• Refs: DOM நோட்களை நேரடியாக அணுக ரியாக்ட் ரெஃப்ஸ்களைப் பயன்படுத்தவும். DOM எலிமென்ட்களுடன் தொடர்பு கொள்வதற்கான பரிந்துரைக்கப்பட்ட அணுகுமுறை இதுவாகும்.
• கட்டுப்படுத்தப்பட்ட காம்போனென்ட்கள்: ரியாக்ட் மூலம் அவற்றின் ஸ்டேட்டை நிர்வகிப்பதன் மூலம் உங்கள் காம்போனென்ட்களை "கட்டுப்படுத்தப்பட்டதாக" ஆக்குங்கள். இது DOM-ஐ நேரடியாக அணுகாமல் UI-ஐக் கையாள உங்களை அனுமதிக்கிறது.
• ஈவன்ட் ஹேண்ட்லர்கள்: உங்கள் காம்போனென்ட்களுடன் ஈவன்ட் ஹேண்ட்லர்களை இணைத்து, இலக்கு DOM எலிமென்ட்டை அணுக ஈவன்ட் ஆப்ஜெக்டைப் பயன்படுத்தவும்.

ரியாக்ட் 18 மற்றும் ReactDOM-இல் கன்கரென்சி (Concurrency)

ரியாக்ட் 18 கன்கரென்சியை அறிமுகப்படுத்துகிறது, இது ரெண்டரிங் பணிகளை இடைநிறுத்த, தற்காலிகமாக நிறுத்த, மீண்டும் தொடங்க அல்லது கைவிட ரியாக்ட்டை அனுமதிக்கும் ஒரு புதிய பொறிமுறையாகும். இது ட்ரான்சிஷன்கள் மற்றும் செலக்டிவ் ஹைட்ரேஷன் போன்ற சக்திவாய்ந்த அம்சங்களைத் திறக்கிறது, இது மென்மையான மற்றும் அதிக பதிலளிக்கக்கூடிய பயனர் அனுபவத்திற்கு வழிவகுக்கிறது.

ReactDOM மீதான தாக்கம்: கன்கரென்சியின் நன்மைகளைப் பயன்படுத்த ReactDOM.createRoot-ஐ ஏற்றுக்கொள்வது முக்கியமானது. இந்த மெத்தட் உங்கள் பயன்பாடு ரெண்டர் செய்யப்படும் ஒரு ரூட்டை உருவாக்குகிறது, இது ரெண்டரிங் பணிகளை மிகவும் திறமையாக நிர்வகிக்க ரியாக்ட்டை செயல்படுத்துகிறது.

ட்ரான்சிஷன்கள்: ட்ரான்சிஷன்கள் சில ஸ்டேட் புதுப்பிப்புகளை அவசரமற்றவை எனக் குறிக்க உங்களை அனுமதிக்கின்றன, இது ரியாக்ட் மிக முக்கியமான புதுப்பிப்புகளுக்கு முன்னுரிமை அளிக்கவும் பதிலளிக்கும் தன்மையைப் பராமரிக்கவும் அனுமதிக்கிறது. எடுத்துக்காட்டாக, ரூட்களுக்கு இடையில் செல்லும்போது, ரூட் ட்ரான்சிஷனை அவசரமற்ற புதுப்பிப்பாகக் குறிக்கலாம், தரவு பெறும்போதும் UI பதிலளிக்கக்கூடியதாக இருப்பதை உறுதிசெய்கிறது.

செலக்டிவ் ஹைட்ரேஷன்: செலக்டிவ் ஹைட்ரேஷன் மூலம், ரியாக்ட் முழு பயன்பாட்டையும் ஒரே நேரத்தில் ஹைட்ரேட் செய்வதற்குப் பதிலாக, தேவைக்கேற்ப தனிப்பட்ட காம்போனென்ட்களை ஹைட்ரேட் செய்ய முடியும். இது பெரிய பயன்பாடுகளுக்கான ஆரம்ப ஏற்றுதல் நேரத்தை கணிசமாக மேம்படுத்துகிறது.

React ReactDOM-க்கான உலகளாவிய பரிசீலனைகள்

உலகளாவிய பார்வையாளர்களுக்காக ரியாக்ட் பயன்பாடுகளை உருவாக்கும் போது, சர்வதேசமயமாக்கல் (i18n) மற்றும் உள்ளூர்மயமாக்கல் (l10n) போன்ற காரணிகளைக் கருத்தில் கொள்வது அவசியம். ReactDOM நேரடியாக இந்த அம்சங்களைக் கையாளவில்லை, ஆனால் அதை i18n லைப்ரரிகள் மற்றும் சிறந்த நடைமுறைகளுடன் ஒருங்கிணைப்பது முக்கியமானது.

• சர்வதேசமயமாக்கல் (i18n): பொறியியல் மாற்றங்கள் தேவைப்படாமல் வெவ்வேறு மொழிகள் மற்றும் பிராந்தியங்களுக்கு ஏற்றவாறு பயன்பாடுகளை வடிவமைத்து உருவாக்கும் செயல்முறை.
• உள்ளூர்மயமாக்கல் (l10n): உரையை மொழிபெயர்ப்பது, வடிவமைப்பை சரிசெய்வது மற்றும் கலாச்சார வேறுபாடுகளைக் கையாள்வதன் மூலம் ஒரு குறிப்பிட்ட மொழி அல்லது பிராந்தியத்திற்காக ஒரு சர்வதேசமயமாக்கப்பட்ட பயன்பாட்டை மாற்றியமைக்கும் செயல்முறை.

i18n லைப்ரரிகளைப் பயன்படுத்துதல்:

react-i18next மற்றும் globalize போன்ற லைப்ரரிகள் மொழிபெயர்ப்புகள், தேதி மற்றும் நேர வடிவமைப்பு மற்றும் பிற உள்ளூர்மயமாக்கல் தொடர்பான பணிகளை நிர்வகிப்பதற்கான கருவிகளை வழங்குகின்றன. இந்த லைப்ரரிகள் பொதுவாக ரியாக்ட் மற்றும் ReactDOM உடன் தடையின்றி ஒருங்கிணைக்கப்படுகின்றன.

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

இந்த எடுத்துக்காட்டில், useTranslation ஹூக் t என்ற மொழிபெயர்ப்பு ஃபங்ஷனுக்கான அணுகலை வழங்குகிறது, இது கொடுக்கப்பட்ட கீ-க்கான பொருத்தமான மொழிபெயர்ப்பைப் பெறுகிறது. மொழிபெயர்ப்புகள் பொதுவாக ஒவ்வொரு மொழிக்கும் தனித்தனி கோப்புகளில் சேமிக்கப்படுகின்றன.

வலமிருந்து இடமாக (RTL) லேஅவுட்:

அரபு மற்றும் ஹீப்ரு போன்ற சில மொழிகள் வலமிருந்து இடமாக எழுதப்படுகின்றன. இந்த மொழிகளுக்கான பயன்பாடுகளை உருவாக்கும்போது, உங்கள் UI ஆனது RTL லேஅவுட்டை ஆதரிக்கிறது என்பதை உறுதிப்படுத்த வேண்டும். இது பொதுவாக உரையின் திசையை சரிசெய்தல், காம்போனென்ட்களின் லேஅவுட்டை பிரதிபலித்தல் மற்றும் இருதிசை உரையை கையாளுதல் ஆகியவற்றை உள்ளடக்கியது.

ReactDOM-ஐப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

திறமையான மற்றும் பராமரிக்கக்கூடிய ரியாக்ட் பயன்பாடுகளை உறுதிசெய்ய, ReactDOM-ஐப் பயன்படுத்தும்போது இந்த சிறந்த நடைமுறைகளைப் பின்பற்றவும்:

• ரியாக்ட் 18 மற்றும் அதற்குப் பிறகு ReactDOM.createRoot-ஐப் பயன்படுத்தவும்: இது உங்கள் பயன்பாட்டை ரெண்டர் செய்வதற்கும் கன்கரென்சியின் நன்மைகளைப் பயன்படுத்துவதற்கும் பரிந்துரைக்கப்பட்ட வழியாகும்.
• நேரடி DOM கையாளுதலைத் தவிர்க்கவும்: ரியாக்ட் DOM-ஐ நிர்வகிக்கட்டும். நேரடி DOM கையாளுதல் முரண்பாடுகள் மற்றும் செயல்திறன் சிக்கல்களுக்கு வழிவகுக்கும்.
• ரெஃப்ஸ்களை குறைவாகப் பயன்படுத்தவும்: ஒரு இன்புட் எலிமென்டில் ஃபோகஸ் செய்வது போன்ற குறிப்பிட்ட நோக்கங்களுக்காக DOM நோட்களை நேரடியாக அணுக வேண்டியிருக்கும் போது மட்டுமே ரெஃப்ஸ்களைப் பயன்படுத்தவும்.
• ரெண்டரிங் செயல்திறனை மேம்படுத்தவும்: தேவையற்ற ரீ-ரெண்டர்களைத் தடுக்க மெமோயைசேஷன் மற்றும் shouldComponentUpdate போன்ற நுட்பங்களைப் பயன்படுத்தவும்.
• மேம்பட்ட செயல்திறன் மற்றும் SEO-க்காக சர்வர்-சைட் ரெண்டரிங்கைக் கருத்தில் கொள்ளுங்கள்.
• சர்வதேசமயமாக்கல் மற்றும் உள்ளூர்மயமாக்கலுக்கு i18n லைப்ரரிகளைப் பயன்படுத்தவும்.
• வெவ்வேறு உலாவிகள் மற்றும் சாதனங்களில் உங்கள் பயன்பாட்டை முழுமையாக சோதிக்கவும்.

முடிவுரை

ReactDOM என்பது ரியாக்ட் சுற்றுச்சூழலின் ஒரு முக்கிய பகுதியாகும், இது ரியாக்ட் காம்போனென்ட்களுக்கும் உலாவியின் DOM-க்கும் இடையே பாலத்தை வழங்குகிறது. ReactDOM.render(), ReactDOM.hydrate(), மற்றும் ReactDOM.unmountComponentAtNode() போன்ற முக்கிய மெத்தட்களைப் புரிந்துகொள்வதன் மூலமும், சிறந்த நடைமுறைகளைக் கடைப்பிடிப்பதன் மூலமும், நீங்கள் செயல்திறன் மிக்க, பராமரிக்கக்கூடிய மற்றும் உலகளவில் அணுகக்கூடிய ரியாக்ட் பயன்பாடுகளை உருவாக்க முடியும். ரியாக்ட் 18-இல் கன்கரென்சி அறிமுகப்படுத்தப்பட்டதன் மூலம், புதிய அளவிலான செயல்திறன் மற்றும் பதிலளிக்கும் தன்மையைத் திறக்க ReactDOM.createRoot-ஐ ஏற்றுக்கொள்வது முக்கியமானது. உண்மையான உள்ளடக்கிய மற்றும் அணுகக்கூடிய பயனர் அனுபவங்களை உருவாக்க, உலகளாவிய பார்வையாளர்களுக்காக உருவாக்கும்போது சர்வதேசமயமாக்கல் மற்றும் உள்ளூர்மயமாக்கல் சிறந்த நடைமுறைகளைக் கருத்தில் கொள்ள நினைவில் கொள்ளுங்கள்.