தடையற்ற UI-ஐ உருவாக்குதல்: பல கூறுகளை வழங்குவதற்கான React Fragments குறித்த ஒரு விரிவான உலகளாவிய வழிகாட்டி

நவீன வலை மேம்பாட்டின் பரந்த மற்றும் எப்போதும் வளர்ந்து வரும் நிலப்பரப்பில், React ஒரு மாபெரும் சக்தியாக விளங்குகிறது. இது உலகெங்கிலும் உள்ள உருவாக்குநர்களுக்கு சிக்கலான மற்றும் ஊடாடும் பயனர் இடைமுகங்களை குறிப்பிடத்தக்க செயல்திறனுடன் உருவாக்க உதவுகிறது. React-இன் தத்துவத்தின் மையத்தில் கூறு-அடிப்படையிலான கட்டமைப்பு (component-based architecture) என்ற கருத்து உள்ளது, இதில் UI-கள் தற்சார்புடைய, மீண்டும் பயன்படுத்தக்கூடிய துண்டுகளாக பிரிக்கப்படுகின்றன. இந்த மாடுலர் அணுகுமுறை பராமரிப்பு மற்றும் அளவிடுதல் திறனை கணிசமாக மேம்படுத்துகிறது, இது சர்வதேச மேம்பாட்டுக் குழுக்களிடையே விருப்பமான தேர்வாக உள்ளது.

இருப்பினும், அதன் மகத்தான சக்தியுடன் கூட, React சில நுணுக்கங்களை முன்வைக்கிறது, அவற்றை உருவாக்குநர்கள் கையாள வேண்டும். புதியவர்கள் மற்றும் அனுபவம் வாய்ந்த நிபுணர்கள் இருவரும் அடிக்கடி எதிர்கொள்ளும் சவால்களில் ஒன்று, ஒரு React கூறின் render முறை (அல்லது ஒரு செயல்பாட்டுக் கூறின் return மதிப்பு) ஒரே ஒரு மூலக் கூறை (single root element) மட்டுமே வழங்க வேண்டும் என்ற உள்ளார்ந்த வரம்பு ஆகும். பல அருகிலுள்ள கூறுகளை நேரடியாக வழங்க முயற்சிப்பது தவிர்க்க முடியாமல் ஒரு தொகுப்புப் பிழைக்கு (compilation error) வழிவகுக்கும்: "அருகிலுள்ள JSX கூறுகள் ஒரு περιβάλλων குறிச்சொல்லில் (enclosing tag) போர்த்தப்பட்டிருக்க வேண்டும்." இந்த கட்டுப்படுத்தப்பட்டதாகத் தோன்றும் விதிக்கு React-இன் virtual DOM செயல்படும் விதத்தில் ஒரு அடிப்படைக் காரணம் உள்ளது, மேலும் அதன் தீர்வு நேர்த்தியானது மற்றும் சக்தி வாய்ந்தது: React Fragments.

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

முக்கிய சிக்கல்: ஏன் பல கூறுகளை நேரடியாக வழங்க முடியாது?

React Fragments-ஐ உண்மையாகப் பாராட்ட, அவை தீர்க்கும் சிக்கலைப் புரிந்துகொள்வது முக்கியம். உங்கள் React கூறுகளில் நீங்கள் JSX எழுதும்போது, நீங்கள் நேரடியாக மூல HTML-ஐ எழுதவில்லை. மாறாக, JSX என்பது React.createElement()-ஐ அழைப்பதற்கான ஒரு தொடரியல் சர்க்கரை (syntactic sugar) ஆகும். உதாரணமாக, இந்த JSX துணுக்கு:

• <div>வணக்கம்</div>

இது போன்ற ஒன்றாக மாற்றப்படுகிறது:

• React.createElement('div', null, 'வணக்கம்')

React.createElement() செயல்பாடு, அதன் வடிவமைப்பின்படி, ஒரு ஒற்றைக் கூறை உருவாக்குவதற்காக உருவாக்கப்பட்டது. நீங்கள் இரண்டு உடன்பிறப்புக் கூறுகளை வழங்க முயற்சித்தால், இதுபோல:

• <h1>வரவேற்கிறோம்</h1>
• <p>இது ஒரு பத்தி.</p>

React-இன் உருவாக்கச் செயல்முறை இதை பல மூல React.createElement() அழைப்புகளாக மொழிபெயர்க்க முயற்சிக்கிறது, இது அதன் உள் சரிசெய்தல் வழிமுறையுடன் (reconciliation algorithm) அடிப்படையில் பொருந்தாது. Virtual DOM, React-இன் உண்மையான DOM-இன் இலகுரக நினைவகப் பிரதிநிதித்துவம், மாற்றங்களை திறமையாகக் கண்காணிக்க ஒவ்வொரு கூறுக்கும் ஒரு ஒற்றை மூல முனை (single root node) தேவை. React தற்போதைய virtual DOM மரத்தை புதியதுடன் ஒப்பிடும்போது ("diffing" எனப்படும் செயல்முறை), உண்மையான DOM-இல் என்ன புதுப்பிக்கப்பட வேண்டும் என்பதைக் கண்டறிய ஒவ்வொரு கூறுக்கும் ஒரு ஒற்றை மூலத்திலிருந்து தொடங்குகிறது. ஒரு கூறு பல தொடர்பில்லாத மூலங்களை வழங்கினால், இந்த diffing செயல்முறை கணிசமாக மிகவும் சிக்கலானதாகவும், திறனற்றதாகவும், பிழைகளுக்கு ஆளாகக்கூடியதாகவும் மாறும்.

நடைமுறை தாக்கத்தைக் கவனியுங்கள்: உங்களிடம் இரண்டு தொடர்பில்லாத மேல்-நிலை கூறுகள் இருந்தால், ஒரு பொதுவான பெற்றோர் இல்லாமல் React அவற்றை எவ்வாறு சீராகக் கண்டறிந்து புதுப்பிக்கும்? சரிசெய்தல் செயல்முறையின் நிலைத்தன்மையும் கணிக்கக்கூடிய தன்மையும் React-இன் செயல்திறன் மேம்படுத்தல்களுக்கு மிக முக்கியம். எனவே, "ஒற்றை மூலக் கூறு" விதி ஒரு தன்னிச்சையான கட்டுப்பாடு அல்ல, ஆனால் React-இன் திறமையான ஒழுங்கமைவு பொறிமுறையின் ஒரு அடித்தளத் தூண் ஆகும்.

பொதுவான பிழையின் எடுத்துக்காட்டு:

ஒரு உறையின்றி நீங்கள் சந்திக்கும் பிழையை விளக்குவோம்:

• // MyComponent.js
• import React from 'react';
• function MyComponent() {
• return (
• <h3>பிரிவின் தலைப்பு</h3>
• <p>உள்ளடக்கம் இங்கே வரும்.</p>
• );
• }
• export default MyComponent;

இந்தக் கூறை தொகுக்க அல்லது இயக்க முயற்சித்தால் ஒரு தெளிவான பிழைச் செய்தி வரும்: "அருகிலுள்ள JSX கூறுகள் ஒரு περιβάλλων குறிச்சொல்லில் (e.g. <div>...</div> or <>...<>) போர்த்தப்பட்டிருக்க வேண்டும்."

React Fragments அறிமுகம்: நேர்த்தியான தீர்வு

React 16-க்கு முன்பு, உருவாக்குநர்கள் ஒற்றை மூலக் கூறு தேவையை பூர்த்தி செய்ய, பல கூறுகளை தேவையற்ற <div> குறிச்சொல்லில் போர்த்துவதை வழக்கமாகக் கொண்டிருந்தனர். இது செயல்பட்டாலும், இந்த அணுகுமுறை பெரும்பாலும் விரும்பத்தகாத பக்க விளைவுகளுக்கு வழிவகுத்தது: இது DOM-ஐ கூடுதல், அர்த்தமற்ற முனைகளால் மாசுபடுத்தியது, CSS தளவமைப்புகளை (குறிப்பாக flexbox அல்லது grid உடன்) சீர்குலைக்கக்கூடும், மற்றும் சில நேரங்களில் சொற்பொருள் தவறுகளைச் சேர்த்தது. React Fragments இந்த சவால்களுக்கு ஒரு அருமையான தீர்வாக வந்தது, DOM-இல் எந்த கூடுதல் முனைகளையும் சேர்க்காமல் பல குழந்தைகளை குழுவாக்க ஒரு வழியை வழங்குகிறது.

ஒரு React Fragment என்பது அடிப்படையில் ஒரு ஒதுக்கிடம் ஆகும், இது React-க்கு அதன் குழந்தைகளை ஒரு இடைநிலை உறை உறுப்பை உருவாக்காமல் நேரடியாக DOM-இல் வழங்கச் சொல்கிறது. இது ஒரு தொடரியல் சர்க்கரை, இது கூறுகளின் வருமானத்திற்கான ஒற்றை மூலக் கூறு தேவையை பூர்த்தி செய்ய உங்களை அனுமதிக்கிறது, அதே நேரத்தில் ஒரு சுத்தமான மற்றும் சொற்பொருள் ரீதியான DOM கட்டமைப்பைப் பராமரிக்கிறது. இதை ஒழுங்கமைக்கப்பட்ட வெளியீட்டில் ஒரு பௌதீகக் குழுவாகக் காட்டிலும் ஒரு தர்க்கரீதியான குழுவாக்க பொறிமுறையாக நினைத்துப் பாருங்கள்.

React Fragments பயன்படுத்துவதன் முக்கிய நன்மைகள்:

1. தூய்மையான DOM கட்டமைப்பு: இதுவே மிக முக்கியமான நன்மை என்று வாதிடலாம். Fragments தேவையற்ற <div> கூறுகளை உட்செலுத்துவதைத் தடுக்கின்றன, இதன் விளைவாக உங்கள் நோக்கம் கொண்ட சொற்பொருள் கட்டமைப்பை மிகவும் துல்லியமாகப் பிரதிபலிக்கும் ஒரு DOM உருவாகிறது. ஒரு மெலிந்த DOM-ஐ ஆய்வு செய்வது, பிழைத்திருத்தம் செய்வது மற்றும் நிர்வகிப்பது எளிதாக இருக்கும்.
2. மேம்படுத்தப்பட்ட செயல்திறன்: குறைவான DOM முனைகள் என்றால் உலாவியின் ஒழுங்கமைவு இயந்திரத்திற்கு குறைவான வேலை. DOM மரம் சிறியதாக இருக்கும்போது, தளவமைப்பு கணக்கீடுகள், பாணியமைத்தல் மற்றும் வரைதல் செயல்முறைகள் வேகமாக இருக்கக்கூடும், இது அதிக பதிலளிக்கக்கூடிய பயனர் இடைமுகத்திற்கு வழிவகுக்கும். சிறிய பயன்பாடுகளுக்கு செயல்திறன் ஆதாயம் குறைவாக இருக்கலாம், ஆனால் ஆழமான கூறு மரங்கள், சிக்கலான தளவமைப்புகள் மற்றும் அடிக்கடி புதுப்பிப்புகள் கொண்ட பெரிய அளவிலான பயன்பாடுகளில் இது குறிப்பிடத்தக்கதாக மாறும், இது உலகளவில் பரந்த அளவிலான சாதனங்களில் உள்ள பயனர்களுக்கு பயனளிக்கும்.
3. சொற்பொருள் HTML பராமரிப்பு: சில HTML கட்டமைப்புகள் மிகவும் குறிப்பிட்டவை. உதாரணமாக, ஒரு <table> ஒரு குறிப்பிட்ட படிநிலையில் <tbody>, <thead>, <tr>, மற்றும் <td> கூறுகளை எதிர்பார்க்கிறது. பல <td>-களை வழங்க ஒரு <tr>-க்குள் ஒரு கூடுதல் <div>-ஐ சேர்ப்பது அட்டவணையின் சொற்பொருள் ஒருமைப்பாட்டையும் அதன் பாணியையும் உடைத்துவிடும். Fragments இந்த முக்கியமான சொற்பொருள் உறவுகளைப் பாதுகாக்கின்றன.
4. CSS தளவமைப்பு சிக்கல்களைத் தவிர்க்கிறது: தேவையற்ற உறை <div>-கள் CSS கட்டமைப்புகள் அல்லது தனிப்பயன் பாணிகளுடன் தலையிடக்கூடும், குறிப்பாக CSS Flexbox அல்லது Grid போன்ற மேம்பட்ட தளவமைப்பு மாதிரிகளைப் பயன்படுத்தும்போது. ஒரு <div> ஒரு எதிர்பாராத தொகுதி-நிலை சூழலை அறிமுகப்படுத்தலாம் அல்லது ஓட்டத்தை மாற்றலாம், கவனமாக வடிவமைக்கப்பட்ட வடிவமைப்புகளை உடைக்கலாம். Fragments இந்த அபாயத்தை முழுமையாக நீக்குகின்றன.
5. குறைக்கப்பட்ட நினைவகப் பயன்பாடு: சிறியதாக இருந்தாலும், குறைவான DOM முனைகள் உலாவியால் சற்று குறைவான நினைவக நுகர்வுக்கு வழிவகுக்கும், இது ஒட்டுமொத்தமாக ஒரு திறமையான வலைப் பயன்பாட்டிற்கு பங்களிக்கிறது.

Fragments-க்கான தொடரியல் சர்க்கரை: சுருக்கெழுத்து

React ஒரு Fragment-ஐ அறிவிக்க இரண்டு வழிகளை வழங்குகிறது: வெளிப்படையான <React.Fragment> தொடரியல் மற்றும் மிகவும் சுருக்கமான சுருக்கெழுத்து <></>.

1. வெளிப்படையான <React.Fragment> தொடரியல்:

இது ஒரு Fragment-ஐப் பயன்படுத்துவதற்கான முழுமையான, விரிவான வழியாகும். நீங்கள் ஒரு key prop-ஐ அனுப்ப வேண்டியிருக்கும் போது இது குறிப்பாக பயனுள்ளதாக இருக்கும் (இதை நாம் விரைவில் விவாதிப்போம்).

• // MyComponentWithFragment.js
• import React from 'react';
• function MyComponentWithFragment() {
• return (
• <React.Fragment>
• <h3>பிரிவின் தலைப்பு</h3>
• <p>உள்ளடக்கம் இங்கே வருகிறது, இப்போது சரியாக போர்த்தப்பட்டுள்ளது.</p>
• <button>என்னை கிளிக் செய்யவும்</button>
• </React.Fragment>
• );
• }
• export default MyComponentWithFragment;

இந்தக் கூறு ஒழுங்கமைக்கப்படும்போது, உலாவியின் டெவலப்பர் கருவிகள் <h3>, <p>, மற்றும் <button> கூறுகளை அவற்றின் பெற்றோர் கூறின் கீழ் நேரடி உடன்பிறப்புகளாகக் காண்பிக்கும், இடையில் எந்த <div> அல்லது ஒத்த உறையும் இருக்காது.

2. சுருக்கெழுத்து தொடரியல் <></>:

React 16.2-இல் அறிமுகப்படுத்தப்பட்ட, வெற்று குறிச்சொல் தொடரியல் என்பது அதன் சுருக்கம் மற்றும் வாசிப்புத்திறன் காரணமாக பெரும்பாலான பொதுவான நிகழ்வுகளுக்கு Fragments-ஐப் பயன்படுத்த மிகவும் பொதுவான மற்றும் விரும்பப்படும் வழியாகும். இது பெரும்பாலும் "குறுக்கு தொடரியல்" அல்லது "வெற்று குறிச்சொல் தொடரியல்" என்று குறிப்பிடப்படுகிறது.

• // MyComponentWithShorthandFragment.js
• import React from 'react';
• function MyComponentWithShorthandFragment() {
• return (
• <>
• <h3>மற்றொரு பிரிவின் தலைப்பு</h3>
• <p>மேலும் உள்ளடக்கம், தடையின்றி ஒருங்கிணைக்கப்பட்டது.</p>
• <a href="#">மேலும் அறிக</a>
• </>
• );
• }
• export default MyComponentWithShorthandFragment;

செயல்பாட்டு ரீதியாக, சுருக்கெழுத்து <></> என்பது <React.Fragment></React.Fragment>-க்கு சமமானது, ஒரு முக்கியமான விதிவிலக்குடன்: சுருக்கெழுத்து தொடரியல் key உட்பட எந்த props-ஐயும் ஆதரிக்காது. இதன் பொருள் நீங்கள் ஒரு Fragment-க்கு ஒரு key-ஐ ஒதுக்க வேண்டும் என்றால் (இது Fragments பட்டியல்களை ஒழுங்கமைக்கும்போது பொதுவானது), நீங்கள் வெளிப்படையான <React.Fragment> தொடரியலைப் பயன்படுத்த வேண்டும்.

React Fragments-இன் நடைமுறைப் பயன்பாடுகள் மற்றும் பயன்பாட்டு நிகழ்வுகள்

React Fragments பல்வேறு நிஜ-உலக சூழ்நிலைகளில் ஜொலிக்கின்றன, பொதுவான மேம்பாட்டுத் தடைகளை அழகாகத் தீர்க்கின்றன. மிகவும் தாக்கத்தை ஏற்படுத்தும் சில பயன்பாடுகளை ஆராய்வோம்.

1. பல அட்டவணை நெடுவரிசைகள் (<td>) அல்லது வரிசைகள் (<tr>) ஒழுங்கமைத்தல்

இது ஒருவேளை Fragments ഒഴിച്ചുകൂടാനാവാത്തவை என்பதற்கு ஒரு சிறந்த உதாரணமாக இருக்கலாம். HTML அட்டவணைகள் ஒரு கடுமையான கட்டமைப்பைக் கொண்டுள்ளன. ஒரு <tr> (அட்டவணை வரிசை) கூறு நேரடியாக <td> (அட்டவணை தரவு) அல்லது <th> (அட்டவணை தலைப்பு) கூறுகளை மட்டுமே கொண்டிருக்க முடியும். பல <td>-களைப் போர்த்த ஒரு <tr>-க்குள் ஒரு <div>-ஐ அறிமுகப்படுத்துவது அட்டவணையின் சொற்பொருளையும் அதன் ஒழுங்கமைப்பையும் உடைத்துவிடும், இது காட்சிப் பிழைகள் அல்லது அணுகல்தன்மை சிக்கல்களுக்கு வழிவகுக்கும்.

சூழ்நிலை: ஒரு பயனர் விவரங்கள் அட்டவணை வரிசை கூறு

பயனர் தகவலைக் காட்டும் ஒரு சர்வதேச பயன்பாட்டிற்கான தரவு அட்டவணையை உருவாக்குவதை கற்பனை செய்து பாருங்கள். ஒவ்வொரு வரிசையும் பல நெடுவரிசைகளை ஒழுங்கமைக்க வேண்டிய ஒரு கூறு ஆகும்:

• Fragment இல்லாமல் (தவறானது):
• // UserTableRow.js - அட்டவணை தளவமைப்பை உடைக்கும்
• import React from 'react';
• function UserTableRow({ user }) {
• return (
• <tr>
• <div> {/* பிழை: tr-க்கு உள்ளே நேரடியாக div வைக்க முடியாது, அது tds-களை போர்த்தினால் */}
• <td>{user.id}</td>
• <td>{user.name}</td>
• <td>{user.email}</td>
• </div>
• </tr>
• );
• }
• export default UserTableRow;

மேலே உள்ள குறியீடு ஒரு பிழையை வீசும் அல்லது ஒரு சிதைந்த அட்டவணையை ஒழுங்கமைக்கும். Fragments இதை எவ்வாறு நேர்த்தியாக தீர்க்கிறது என்பது இங்கே:

• Fragment உடன் (சரியானது மற்றும் சொற்பொருள் ரீதியானது):
• // UserTableRow.js - சரியானது
• import React from 'react';
• function UserTableRow({ user }) {
• return (
• <tr>
• <> {/* சுருக்கெழுத்து Fragment */}
• <td>{user.id}</td>
• <td>{user.name}</td>
• <td>{user.email}</td>
• </>
• </tr>
• );
• }
• export default UserTableRow;

இந்த சரிசெய்யப்பட்ட எடுத்துக்காட்டில், Fragment திறம்பட <td> கூறுகளை குழுவாக்குகிறது, கூறின் வருமானத்திற்கான React-இன் ஒற்றை மூலத் தேவையை பூர்த்தி செய்கிறது, அதே நேரத்தில் உண்மையான DOM-இல், இந்த <td>-கள் <tr>-இன் நேரடி குழந்தைகள் என்பதை உறுதி செய்கிறது, இது சரியான சொற்பொருள் ஒருமைப்பாட்டைப் பராமரிக்கிறது.

2. பல கூறுகளின் நிபந்தனை ஒழுங்கமைத்தல்

சில நேரங்களில், சில நிலை அல்லது props-களின் அடிப்படையில் தொடர்புடைய கூறுகளின் தொகுப்பை நிபந்தனையுடன் ஒழுங்கமைக்க வேண்டியிருக்கலாம். Fragments இந்த கூறுகளை தளவமைப்பு அல்லது சொற்பொருளை பாதிக்கக்கூடிய தேவையற்ற உறையின்றி குழுவாக்க உங்களை அனுமதிக்கிறது.

சூழ்நிலை: பயனர் நிலைத் தகவலைக் காண்பித்தல்

ஒரு சுயவிவர அட்டை கூறைக் கவனியுங்கள், இது ஒரு பயனர் செயலில் இருந்தால் அல்லது சிறப்புரிமைகள் இருந்தால் வெவ்வேறு நிலை பேட்ஜ்களைக் காட்டுகிறது:

• Fragment இல்லாமல் (கூடுதல் Div சேர்க்கிறது):
• // UserStatusBadges.js - ஒரு தேவையற்ற div-ஐ சேர்க்கிறது
• import React from 'react';
• function UserStatusBadges({ isActive, hasAdminPrivileges }) {
• return (
• <div> {/* இந்த div பெற்றோர் flex/grid தளவமைப்புடன் தலையிடக்கூடும் */}
• {isActive && <span className="badge active">செயலில்</span>}
• {hasAdminPrivileges && <span className="badge admin">நிர்வாகி</span>}
• </div>
• );
• }
• export default UserStatusBadges;

செயல்பாட்டு ரீதியாக இருந்தாலும், UserStatusBadges அதன் நேரடி குழந்தைகளை flex உருப்படிகளாக எதிர்பார்க்கும் ஒரு flex கொள்கலனுக்குள் பயன்படுத்தப்பட்டால், போர்த்தும் <div> flex உருப்படியாக மாறக்கூடும், இது விரும்பிய தளவமைப்பை உடைக்கக்கூடும். ஒரு Fragment-ஐப் பயன்படுத்துவது இதைத் தீர்க்கிறது:

• Fragment உடன் (தூய்மையானது மற்றும் பாதுகாப்பானது):
• // UserStatusBadges.js - கூடுதல் div இல்லை
• import React from 'react';
• function UserStatusBadges({ isActive, hasAdminPrivileges }) {
• return (
• <> {/* Fragment, பெற்றோர் flex கொள்கலனாக இருந்தால் நேரடி குழந்தைகள் flex உருப்படிகளாக இருப்பதை உறுதி செய்கிறது */}
• {isActive && <span className="badge active">செயலில்</span>}
• {hasAdminPrivileges && <span className="badge admin">நிர்வாகி</span>}
• </>
• );
• }
• export default UserStatusBadges;

இந்த அணுகுமுறை <span> கூறுகள் (ஒழுங்கமைக்கப்பட்டால்) பெற்றோரின் ஒழுங்கமைப்பில் உள்ள மற்ற கூறுகளுக்கு நேரடி உடன்பிறப்புகளாக மாறுவதை உறுதி செய்கிறது, இது தளவமைப்பு ஒருமைப்பாட்டைப் பாதுகாக்கிறது.

3. கூறுகள் அல்லது கூறுகளின் பட்டியல்களை வழங்குதல்

.map()-ஐப் பயன்படுத்தி ஒரு உருப்படிகளின் பட்டியலை ஒழுங்கமைக்கும்போது, பட்டியலை திறமையாக புதுப்பிக்க மற்றும் சரிசெய்ய React-க்கு பட்டியலிலுள்ள ஒவ்வொரு உருப்படிக்கும் ஒரு தனித்துவமான key prop தேவை. சில நேரங்களில், நீங்கள் மேப்பிங் செய்யும் கூறு தானே பல மூலக் கூறுகளை வழங்க வேண்டியிருக்கலாம். அத்தகைய சந்தர்ப்பங்களில், ஒரு Fragment key-ஐ வழங்குவதற்கான சிறந்த உறையாகும்.

சூழ்நிலை: ஒரு தயாரிப்பு அம்சங்களின் பட்டியலைக் காண்பித்தல்

ஒரு தயாரிப்பு விவரப் பக்கத்தை கற்பனை செய்து பாருங்கள், அங்கு அம்சங்கள் பட்டியலிடப்பட்டுள்ளன, மேலும் ஒவ்வொரு அம்சத்திற்கும் ஒரு ஐகான் மற்றும் ஒரு விளக்கம் இருக்கலாம்:

• // ProductFeature.js
• import React from 'react';
• function ProductFeature({ icon, description }) {
• return (
• <> {/* உள் குழுவாக்கத்திற்கு சுருக்கெழுத்தைப் பயன்படுத்துதல் */}
• <i className={`icon ${icon}`}></i>
• <p>{description}</p>
• </>
• );
• }
• export default ProductFeature;

இப்போது, நாம் இந்த ProductFeature கூறுகளின் பட்டியலை ஒழுங்கமைத்தால்:

• // ProductDetail.js
• import React from 'react';
• import ProductFeature from './ProductFeature';
• const productFeaturesData = [
• { id: 1, icon: 'security', description: 'மேம்பட்ட பாதுகாப்பு அம்சங்கள்' },
• { id: 2, icon: 'speed', description: 'அதிவேக செயல்திறன்' },
• { id: 3, icon: 'support', description: '24/7 உலகளாவிய வாடிக்கையாளர் ஆதரவு' },
• ];
• function ProductDetail() {
• return (
• <div>
• <h2>தயாரிப்பு சிறப்பம்சங்கள்</h2>
• {productFeaturesData.map(feature => (
• <React.Fragment key={feature.id}> {/* key prop-க்காக வெளிப்படையான Fragment */}
• <ProductFeature icon={feature.icon} description={feature.description} />
• </React.Fragment>
• ))}
• </div>
• );
• }
• export default ProductDetail;

இங்கே ProductFeature தானே அதன் ஐகான் மற்றும் பத்தியை குழுவாக்க ஒரு சுருக்கெழுத்து Fragment-ஐப் பயன்படுத்துவதை கவனியுங்கள். முக்கியமாக, ProductDetail-இல், productFeaturesData-ஐ மேப்பிங் செய்யும்போது, நாம் ஒவ்வொரு ProductFeature நிகழ்வையும் ஒரு வெளிப்படையான <React.Fragment>-இல் போர்த்தி key={feature.id}-ஐ ஒதுக்குகிறோம். சுருக்கெழுத்து <></> ஒரு key-ஐ ஏற்காது, இது இந்த பொதுவான சூழ்நிலையில் வெளிப்படையான தொடரியலை அவசியமாக்குகிறது.

4. தளவமைப்பு கூறுகள்

சில நேரங்களில் நீங்கள் உருவாக்கும் கூறுகளின் முதன்மை நோக்கம் மற்ற கூறுகளை தளவமைப்பிற்காக குழுவாக்குவதாகும், அவற்றின் சொந்த DOM தடம் அறிமுகப்படுத்தாமல். இதற்கு Fragments சரியானவை.

சூழ்நிலை: ஒரு இரண்டு-நெடுவரிசை தளவமைப்புப் பிரிவு

ஒரு தளவமைப்புப் பிரிவை கற்பனை செய்து பாருங்கள், அது உள்ளடக்கத்தை இரண்டு தனித்தனி நெடுவரிசைகளில் ஒழுங்கமைக்கிறது, ஆனால் பிரிவு கூறு தானே ஒரு உறை div-ஐ சேர்க்க விரும்பவில்லை:

• // TwoColumnSegment.js
• import React from 'react';
• function TwoColumnSegment({ leftContent, rightContent }) {
• return (
• <>
• <div className="column-left">
• {leftContent}
• </div>
• <div className="column-right">
• {rightContent}
• </div>
• </>
• );
• }
• export default TwoColumnSegment;

இந்த TwoColumnSegment கூறு அதன் இடது மற்றும் வலது நெடுவரிசைகளுக்கு எந்த உள்ளடக்கத்தையும் அனுப்ப உங்களை அனுமதிக்கிறது. கூறு தானே இரண்டு div கூறுகளை வழங்க ஒரு Fragment-ஐப் பயன்படுத்துகிறது, அவை DOM-இல் நேரடி உடன்பிறப்புகளாக இருப்பதை உறுதி செய்கிறது, இது அவற்றின் பெற்றோருக்குப் பயன்படுத்தப்படும் CSS grid அல்லது flexbox தளவமைப்புகளுக்கு முக்கியமானது. உதாரணமாக, ஒரு பெற்றோர் கூறு display: grid; grid-template-columns: 1fr 1fr;-ஐப் பயன்படுத்தினால், இந்த இரண்டு div-களும் நேரடியாக grid உருப்படிகளாக மாறும்.

Keys கொண்ட Fragments: எப்போது மற்றும் ஏன்

React-இல் உள்ள key prop பட்டியல் ஒழுங்கமைப்பை மேம்படுத்துவதற்கு அடிப்படையானது. React ஒரு கூறுகளின் பட்டியலை ஒழுங்கமைக்கும்போது, எந்த உருப்படிகள் மாற்றப்பட்டுள்ளன, சேர்க்கப்பட்டுள்ளன, அல்லது நீக்கப்பட்டுள்ளன என்பதைக் கண்டறிய keys-ஐப் பயன்படுத்துகிறது. இது React-க்கு முழு பட்டியல்களையும் தேவையற்ற முறையில் மீண்டும் ஒழுங்கமைக்காமல் UI-ஐ திறமையாக புதுப்பிக்க உதவுகிறது. ஒரு நிலையான key இல்லாமல், React பட்டியல் உருப்படிகளை சரியாக மறுவரிசைப்படுத்த அல்லது புதுப்பிக்க முடியாமல் போகலாம், இது செயல்திறன் சிக்கல்கள் மற்றும் சாத்தியமான பிழைகளுக்கு வழிவகுக்கும், குறிப்பாக உள்ளீட்டு புலங்கள் அல்லது சிக்கலான தரவுக் காட்சிகள் போன்ற ஊடாடும் கூறுகளுக்கு.

குறிப்பிட்டபடி, சுருக்கெழுத்து Fragment <></> ஒரு key prop-ஐ ஏற்காது. எனவே, நீங்கள் ஒரு தொகுப்பை மேப்பிங் செய்யும்போது, உங்கள் map செயல்பாடு வழங்கும் உருப்படி ஒரு Fragment ஆக இருந்தால் (ஏனெனில் அது பல கூறுகளை வழங்க வேண்டும்), நீங்கள் key-ஐ வழங்க வெளிப்படையான <React.Fragment> தொடரியலைப் பயன்படுத்த வேண்டும்.

எடுத்துக்காட்டு: படிவ புலங்களின் பட்டியலை ஒழுங்கமைத்தல்

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

• // FormFieldGroup.js
• import React from 'react';
• function FormFieldGroup({ label1, value1, label2, value2 }) {
• return (
• <> {/* சுருக்கெழுத்துடன் உள் குழுவாக்கம் */}
• <label>{label1}:</label>
• <input type="text" value={value1} onChange={() => {}} />
• <label>{label2}:</label>
• <input type="text" value={value2} onChange={() => {}} />
• </>
• );
• }
• export default FormFieldGroup;

இப்போது, நாம் இந்த புலக் குழுக்களின் பட்டியலை ஒழுங்கமைக்க வேண்டும் என்றால்:

• // DynamicForm.js
• import React from 'react';
• import FormFieldGroup from './FormFieldGroup';
• const formSections = [
• { id: 'personal', l1: 'முதல் பெயர்', v1: 'ஜான்', l2: 'கடைசி பெயர்', v2: 'டோ' },
• { id: 'contact', l1: 'மின்னஞ்சல்', v1: 'john@example.com', l2: 'தொலைபேசி', v2: '+1234567890' },
• { id: 'address', l1: 'தெரு', v1: '123 மெயின் தெரு', l2: 'நகரம்', v2: 'எந்த நகரமும்' },
• ];
• function DynamicForm() {
• return (
• <form>
• <h2>பயனர் தகவல் படிவம்</h2>
• {formSections.map(section => (
• <React.Fragment key={section.id}> {/* Key இங்கே தேவை */}
• <FormFieldGroup
• label1={section.l1} value1={section.v1}
• label2={section.l2} value2={section.v2}
• />
• </React.Fragment>
• ))}
• </form>
• );
• }
• export default DynamicForm;

இந்த எடுத்துக்காட்டில், map செயல்பாட்டிலிருந்து வழங்கப்படும் ஒவ்வொரு FormFieldGroup-க்கும் ஒரு தனித்துவமான key தேவை. FormFieldGroup தானே ஒரு Fragment-ஐ (பல லேபிள்கள் மற்றும் உள்ளீடுகள்) வழங்குவதால், நாம் FormFieldGroup அழைப்பை ஒரு வெளிப்படையான <React.Fragment>-க்குள் போர்த்தி key={section.id}-ஐ அதற்கு ஒதுக்க வேண்டும். இது React படிவப் பிரிவுகளின் பட்டியலை திறமையாக நிர்வகிக்க உதவுகிறது, குறிப்பாக பிரிவுகள் டைனமிக்காக சேர்க்கப்படும், நீக்கப்படும், அல்லது மறுவரிசைப்படுத்தப்படும்போது.

மேம்பட்ட பரிசீலனைகள் மற்றும் சிறந்த நடைமுறைகள்

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

1. செயல்திறன் நன்மைகளில் ஆழமான பார்வை

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

• குறைக்கப்பட்ட DOM மர அளவு: ஒரு சிறிய DOM மரம் என்றால் உலாவிக்கு அலசுவதற்கு குறைவானது, நினைவகத்தில் நிர்வகிக்க குறைவான முனைகள், மற்றும் ஒழுங்கமைக்கும்போது செய்ய வேண்டிய வேலை குறைவு. ஆயிரக்கணக்கான கூறுகளைக் கொண்ட பக்கங்களுக்கு (நிறுவன டாஷ்போர்டுகள் அல்லது உள்ளடக்கம் நிறைந்த போர்ட்டல்களில் பொதுவானது), இந்த குறைப்பு குறிப்பிடத்தக்கதாக இருக்கும்.
• வேகமான தளவமைப்பு மற்றும் மறுவரைவு: ஒரு கூறு புதுப்பிக்கப்படும்போது, React ஒரு மறு-ஒழுங்கமைவு சுழற்சியைத் தூண்டுகிறது. ஒரு உறை <div> இருந்தால், அதன் குழந்தைகளுக்குள் ஏற்படும் எந்த மாற்றங்களும் உலாவி அந்த <div> மற்றும் அதன் சந்ததியினரின் தளவமைப்பை மீண்டும் கணக்கிடவும் மறுவரைவு செய்யவும் தேவைப்படலாம். இந்த தேவையற்ற உறைகளை அகற்றுவதன் மூலம், உலாவியின் தளவமைப்பு இயந்திரத்திற்கு ஒரு எளிமையான வேலை உள்ளது, இது வேகமான புதுப்பிப்புகள் மற்றும் மென்மையான அனிமேஷன்களுக்கு வழிவகுக்கும், இது வெவ்வேறு புவியியல் பகுதிகள் மற்றும் சாதன வகைகளில் தடையற்ற பயனர் அனுபவத்தை வழங்குவதற்கு இன்றியமையாதது.
• மேம்படுத்தப்பட்ட நினைவகப் பயன்பாடு: ஒரு ஒற்றை DOM முனையின் நினைவகத் தடம் சிறியதாக இருந்தாலும், ஆயிரக்கணக்கான கூறுகளை ஒழுங்கமைக்கும் பல கூறுகளைக் கொண்ட பெரிய பயன்பாடுகளில், தேவையற்ற முனைகளை நீக்குவது ஒட்டுமொத்த நினைவக நுகர்வைக் குறைக்க பங்களிக்கிறது. இது உலகின் பல பகுதிகளில் பொதுவான பழைய அல்லது குறைந்த சக்தி வாய்ந்த சாதனங்களில் உள்ள பயனர்களுக்கு குறிப்பாக பயனளிக்கிறது.

2. சொற்பொருள் HTML-க்கு முன்னுரிமை அளித்தல்

சொற்பொருள் HTML-ஐப் பராமரிப்பது அணுகல்தன்மை, SEO, மற்றும் ஒட்டுமொத்த குறியீட்டுத் தரத்திற்கு முக்கியமானது. இதை அடைவதற்கு Fragments ஒரு சக்திவாய்ந்த கருவியாகும். கூறுகளை குழுவாக்குவதற்காக மட்டும் ஒரு சொற்பொருள் அல்லாத <div>-ஐ நாடுவதை விட, Fragments உங்கள் கூறு அதன் பெற்றோர் சூழலில் அர்த்தமுள்ள கூறுகளை வழங்க அனுமதிக்கிறது. உதாரணமாக:

• ஒரு கூறு <li> கூறுகளை ஒழுங்கமைத்தால், அந்த <li> கூறுகள் ஒரு <ul> அல்லது <ol>-இன் நேரடி குழந்தைகளாக இருக்க வேண்டும்.
• ஒரு கூறு <td> கூறுகளை ஒழுங்கமைத்தால், அவை ஒரு <tr>-இன் நேரடி குழந்தைகளாக இருக்க வேண்டும்.

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

3. Fragments உடன் பிழைத்திருத்தம்

உலாவியின் டெவலப்பர் கருவிகளைப் (Chrome DevTools அல்லது Firefox Developer Tools போன்றவை) பயன்படுத்தி உங்கள் பயன்பாட்டை ஆய்வு செய்யும்போது, DOM மரத்தில் <React.Fragment> அல்லது <></> கூறுகளை நீங்கள் காண மாட்டீர்கள். இதுவே அவற்றின் நோக்கம் - அவை ஒழுங்கமைத்தல் செயல்பாட்டின் போது React-ஆல் நுகரப்படுகின்றன மற்றும் எந்த உண்மையான DOM முனைகளையும் உருவாக்காது. இது ஆரம்பத்தில் பிழைத்திருத்தத்திற்கு ஒரு சவாலாகத் தோன்றலாம், ஆனால் நடைமுறையில், இது ஒரு நன்மை: உங்கள் பக்கத்தின் கட்டமைப்பிற்கு உண்மையாக பங்களிக்கும் கூறுகளை மட்டுமே நீங்கள் பார்க்கிறீர்கள், இது தளவமைப்பு மற்றும் பாணியின் காட்சி ஆய்வை எளிதாக்குகிறது.

4. எப்போது Fragments-ஐப் பயன்படுத்தக்கூடாது (மற்றும் எப்போது ஒரு div பொருத்தமானது)

Fragments நம்பமுடியாத அளவிற்கு பயனுள்ளதாக இருந்தாலும், அவை <div> அல்லது பிற உறை கூறுகளுக்கு ஒரு உலகளாவிய மாற்றீடு அல்ல. ஒரு உறையைப் பயன்படுத்த சரியான காரணங்கள் உள்ளன:

• பாணியமைப்பிற்காக ஒரு கொள்கலன் தேவைப்படும்போது: உங்கள் பல கூறுகளை உள்ளடக்கிய உறை கூறுக்கு நேரடியாக குறிப்பிட்ட CSS பாணிகளை (எ.கா., background-color, border, padding, margin, display: flex) பயன்படுத்த வேண்டும் என்றால், ஒரு <div> (அல்லது <section>, <article> போன்ற மற்றொரு சொற்பொருள் HTML கூறு) அவசியம். Fragments DOM-இல் இல்லை, எனவே நீங்கள் அவற்றை பாணியமைக்க முடியாது.
• ஒரு உறைக்கு நிகழ்வு கேட்பவர்களை இணைக்க வேண்டியிருக்கும் போது: ஒரு குழந்தைகளின் குழுவை உள்ளடக்கிய ஒரு ஒற்றை கூறுக்கு ஒரு நிகழ்வு கேட்பவரை (எ.கா., onClick, onMouseEnter) இணைக்க வேண்டும் என்றால், உங்களுக்கு ஒரு <div> போன்ற ஒரு உறுதியான DOM கூறு தேவைப்படும்.
• உறைக்கு சொற்பொருள் அர்த்தம் இருக்கும்போது: சில நேரங்களில், குழுவாக்கமே சொற்பொருள் அர்த்தத்தைக் கொண்டுள்ளது. உதாரணமாக, தொடர்புடைய படிவ புலங்களின் ஒரு குழு ஒரு <fieldset>-இல் சொற்பொருள் ரீதியாக போர்த்தப்படலாம், அல்லது ஒரு தர்க்கரீதியான உள்ளடக்கப் பிரிவு ஒரு <section>-இல் இருக்கலாம். இந்த சந்தர்ப்பங்களில், உறை "தேவையற்றது" அல்ல, ஆனால் பக்கத்தின் கட்டமைப்பு மற்றும் அர்த்தத்திற்கு ஒருங்கிணைந்ததாகும்.

உறையின் நோக்கத்தை எப்போதும் கருத்தில் கொள்ளுங்கள். இது முற்றிலும் React-இன் ஒற்றை மூலக் கூறு விதியை பூர்த்தி செய்வதற்காகவும், எந்த சொற்பொருள் அல்லது பாணியமைப்பு நோக்கத்தையும் கொண்டிருக்கவில்லை என்றால், ஒரு Fragment சரியான தேர்வாகும். அது ஒரு செயல்பாட்டு, சொற்பொருள், அல்லது பாணியமைப்பு நோக்கத்தைக் கொண்டிருந்தால், பொருத்தமான HTML கூறைப் பயன்படுத்தவும்.

பிற தீர்வுகளுடன் ஒப்பிடுதல் (மற்றும் அவற்றின் வரம்புகள்)

Fragments-க்கு முன்பு, உருவாக்குநர்கள் பல்வேறு மாற்று வழிகளைப் பயன்படுத்தினர், ஒவ்வொன்றும் அதன் சொந்த குறைபாடுகளைக் கொண்டிருந்தன. இந்த மாற்று வழிகளைப் புரிந்துகொள்வது Fragments-இன் நேர்த்தியையும் அவசியத்தையும் எடுத்துக்காட்டுகிறது.

1. சர்வவியாபகமான <div> உறை:

முறை: அனைத்து உடன்பிறப்புக் கூறுகளையும் ஒரு தன்னிச்சையான <div>-இல் போர்த்துதல்.

• நன்மைகள்: செயல்படுத்த எளிதானது, அனைத்து React பதிப்புகளுடனும் வேலை செய்கிறது (Fragments-க்கு முன்பும் கூட), HTML உருவாக்குநர்களுக்கு பழக்கமானது.
• குறைகள்:
• DOM மாசுபாடு: DOM மரத்திற்கு ஒரு கூடுதல், பெரும்பாலும் அர்த்தமற்ற, முனையை சேர்க்கிறது. பெரிய பயன்பாடுகளுக்கு, இது ஒரு வீங்கிய DOM-க்கு வழிவகுக்கும்.
• CSS சிக்கல்கள்: சிக்கலான CSS தளவமைப்புகளை உடைக்கக்கூடும், குறிப்பாக நேரடி குழந்தை உறவுகளை நம்பியிருப்பவை (எ.கா., Flexbox, CSS Grid). ஒரு பெற்றோர் display: flex-ஐக் கொண்டிருந்தால், மற்றும் ஒரு கூறு அதன் குழந்தைகளை போர்த்தும் ஒரு <div>-ஐ வழங்கினால், அந்த <div> flex உருப்படியாக மாறும், அதன் குழந்தைகள் அல்ல, இது தளவமைப்பு நடத்தையை மாற்றக்கூடும்.
• சொற்பொருள் துல்லியமின்மை: அட்டவணைகள் (<tr> நேரடியாக <div>-ஐக் கொண்டிருக்க முடியாது), பட்டியல்கள், மற்றும் வரையறை பட்டியல்கள் போன்ற சூழல்களில் சொற்பொருள் HTML விதிகளை மீறுகிறது. இது அணுகல்தன்மை மற்றும் SEO-ஐப் பாதிக்கிறது.
• அதிகரித்த நினைவகம் மற்றும் செயல்திறன் மேல்நிலை: ஒரு div-க்கு சிறியதாக இருந்தாலும், பெரிய பயன்பாடுகளில் ஒட்டுமொத்த விளைவு மெதுவான ஒழுங்கமைத்தல் மற்றும் அதிக நினைவக நுகர்வுக்கு பங்களிக்கக்கூடும்.

2. கூறுகளின் ஒரு வரிசையை வழங்குதல் (பழைய அணுகுமுறை):

முறை: React 16-க்கு முன்பு, உருவாக்குநர்கள் கூறுகளின் ஒரு வரிசையை வழங்க முடியும். வரிசையில் உள்ள ஒவ்வொரு கூறும் ஒரு தனித்துவமான key prop-ஐக் கொண்டிருக்க வேண்டும்.

• நன்மைகள்: கூடுதல் DOM முனைகளைச் சேர்க்கவில்லை.
• குறைகள்:
• தொடரியல் விரிவு: கூறுகளை ஒரு வரிசை நேரடிக்குள் (array literal) போர்த்த வேண்டியிருந்தது (எ.கா., return [<h1 key="h1">தலைப்பு</h1>, <p key="p">உள்ளடக்கம்</p>];). இது JSX-ஐ விட மிகவும் குறைவாக படிக்கக்கூடியதாக இருந்தது.
• கட்டாய Keys: வரிசையில் உள்ள ஒவ்வொரு மேல்-நிலைக் கூறும் ஒரு டைனமிக் பட்டியலின் பகுதியாக இல்லாவிட்டாலும் கூட, ஒரு தனித்துவமான key-ஐக் கொண்டிருக்க வேண்டும், இது தேவையற்ற கொதிகுறியீட்டைச் சேர்த்தது.
• குறைந்த உள்ளுணர்வு: ஒரு வரிசையை வழங்குவது JSX-க்கு குறைவாக இயல்பாக உணர்ந்தது, இது மரம் போன்ற கட்டமைப்புகளை வலியுறுத்துகிறது.

3. ஒரு சரம் அல்லது எண்ணை வழங்குதல்:

முறை: ஒரு எளிய சரம் அல்லது எண்ணை வழங்குதல் (எ.கா., return 'வணக்கம் உலகம்'; அல்லது return 123;).

• நன்மைகள்: கூடுதல் DOM முனைகள் இல்லை.
• குறைகள்: மிகவும் περιορισμένο பயன்பாட்டு வழக்கு; எளிய உரை அல்லது எண் வெளியீட்டிற்கு மட்டுமே, கட்டமைக்கப்பட்ட UI-க்கு அல்ல.

Fragments இந்த மாற்று வழிகளின் சிறந்த அம்சங்களை நேர்த்தியாக இணைக்கின்றன: JSX-இன் பழக்கம் மற்றும் வாசிப்புத்திறனுடன் கூடுதல் DOM முனைகளைச் சேர்க்காத நன்மை, இவை அனைத்தும் தேவைப்படும்போது key-ஐ வழங்குவதற்கான ஒரு நேரடியான பொறிமுறையை வழங்குகின்றன.

React பதிப்பு பொருந்தக்கூடிய தன்மை

Fragments-இன் வரலாற்றுச் சூழலைப் புரிந்துகொள்வது பல்வேறு திட்ட மரபுகளுடன் பணிபுரியும் உலகளாவிய குழுக்களுக்கு உதவியாக இருக்கும்:

• React 16.0: <React.Fragment> கூறு React 16.0-இல் அறிமுகப்படுத்தப்பட்டது. இது கூறு ஒழுங்கமைப்பிற்கு ஒரு குறிப்பிடத்தக்க மேம்பாட்டைக் குறித்தது, உருவாக்குநர்கள் ஒரு கூடுதல் DOM உறுப்பு இல்லாமல் பல குழந்தைகளை வழங்க அனுமதித்தது.
• React 16.2: மிகவும் விரும்பப்பட்ட சுருக்கெழுத்து தொடரியல், <></>, React 16.2-இல் அறிமுகப்படுத்தப்பட்டது. இது Fragments-ஐ இன்னும் வசதியாகவும், அதன் சுருக்கத்தினால் பரவலாகவும் ஏற்றுக்கொள்ளச் செய்தது.

உங்கள் திட்டம் React-இன் பழைய பதிப்பைப் (எ.கா., React 15 அல்லது அதற்கு முந்தையது) பயன்படுத்துகிறதென்றால், Fragments கிடைக்காது. அத்தகைய சந்தர்ப்பங்களில், நீங்கள் இன்னும் <div> உறை அல்லது வரிசை வருமான முறையை நம்பியிருக்க வேண்டும். இருப்பினும், React 16 மற்றும் அதற்கு மேற்பட்டவற்றின் பரவலான தத்தெடுப்பு மற்றும் நன்மைகளைக் கருத்தில் கொண்டு, அனைத்து புதிய மேம்பாடு மற்றும் தற்போதைய பராமரிப்பிற்கும் ஒரு நவீன React பதிப்பிற்கு மேம்படுத்துவது மிகவும் பரிந்துரைக்கப்படுகிறது.

உலகளாவிய தாக்கம் மற்றும் அணுகல்தன்மை

React Fragments-இன் நன்மைகள் வெறும் உருவாக்குநர் வசதி மற்றும் செயல்திறன் அளவீடுகளைத் தாண்டியும் நீண்டுள்ளன; அவை உலகெங்கிலும் உள்ள இறுதிப் பயனர்கள் மீது, குறிப்பாக அணுகல்தன்மை மற்றும் பல்வேறு வன்பொருள் மற்றும் நெட்வொர்க் நிலைமைகளில் செயல்திறன் ஆகியவற்றைப் பொறுத்தவரை, ஒரு உறுதியான நேர்மறையான தாக்கத்தைக் கொண்டுள்ளன.

• மேம்படுத்தப்பட்ட அணுகல்தன்மை: உருவாக்குநர்கள் தூய்மையான, அதிக சொற்பொருள் கொண்ட HTML கட்டமைப்புகளை உருவாக்க உதவுவதன் மூலம், Fragments சிறந்த அணுகல்தன்மைக்கு நேரடியாக பங்களிக்கின்றன. திரை வாசகர்கள் மற்றும் பிற உதவித் தொழில்நுட்பங்கள், ஊனமுற்ற பயனர்களுக்கு பக்க உள்ளடக்கத்தை துல்லியமாக விளக்குவதற்கு, சரியாக கட்டமைக்கப்பட்ட மற்றும் சொற்பொருள் கொண்ட DOM-ஐ நம்பியுள்ளன. தேவையற்ற <div> கூறுகள் சில சமயங்களில் இந்த விளக்கத்தை சீர்குலைத்து, வழிசெலுத்தல் மற்றும் உள்ளடக்க நுகர்வை மிகவும் சவாலானதாக மாற்றும். Fragments, அடிப்படைக் HTML முடிந்தவரை தூய்மையாகவும், சொற்பொருள் ரீதியாக சரியாகவும் இருப்பதை உறுதி செய்ய உதவுகின்றன, இது உலகெங்கிலும் உள்ள அனைத்து பயனர்களுக்கும் ஒரு உள்ளடக்கிய அனுபவத்தை வழங்குகிறது.
• குறைந்த-நிலை சாதனங்கள் மற்றும் மெதுவான நெட்வொர்க்குகளில் மேம்படுத்தப்பட்ட செயல்திறன்: உலகின் பல பகுதிகளில், இணைய வேகம் சீரற்றதாக இருக்கலாம், மற்றும் உயர்-நிலை கணினி சாதனங்களுக்கான அணுகல் உலகளாவியது அல்ல. செயல்திறன் மிக்க மற்றும் இலகுரக பயன்பாடுகள் ஒரு சமமான பயனர் அனுபவத்தை வழங்குவதற்கு முக்கியமானவை. ஒரு சிறிய, தூய்மையான DOM மரம் (Fragments மூலம் அடையப்பட்டது) என்றால்:
  • பரிமாற்றத்திற்கு குறைவான தரவு: HTML தானே வியத்தகு அளவில் சிறியதாக இல்லாவிட்டாலும், குறைக்கப்பட்ட சிக்கலானது வேகமான அலசல் மற்றும் ஒழுங்கமைப்பிற்கு உதவுகிறது.
  • வேகமான உலாவி ஒழுங்கமைத்தல்: குறைவான DOM முனைகள் என்றால் உலாவியின் ஒழுங்கமைத்தல் இயந்திரத்திற்கு குறைவான வேலை, இது விரைவான ஆரம்ப பக்க ஏற்றங்கள் மற்றும் அதிக பதிலளிக்கக்கூடிய புதுப்பிப்புகளுக்கு வழிவகுக்கும், வரையறுக்கப்பட்ட செயலாக்க சக்தி அல்லது நினைவகம் கொண்ட சாதனங்களில் கூட. இது சக்திவாய்ந்த வன்பொருள் எளிதில் கிடைக்காத அல்லது பொதுவானதாக இல்லாத பகுதிகளில் உள்ள பயனர்களுக்கு நேரடியாக பயனளிக்கிறது.
• சர்வதேச அணிகளுக்கு இடையே நிலைத்தன்மை: மேம்பாட்டுக் குழுக்கள் பெருகிய முறையில் உலகளாவிய மற்றும் விநியோகிக்கப்பட்டதாக மாறுவதால், நிலையான குறியீட்டுத் தரங்களையும் சிறந்த நடைமுறைகளையும் பராமரிப்பது இன்றியமையாதது. Fragments-இன் தெளிவான, சுருக்கமான தொடரியல், அவற்றின் உலகளவில் புரிந்து கொள்ளப்பட்ட நன்மைகளுடன் இணைந்து, வெவ்வேறு நேர மண்டலங்கள் மற்றும் கலாச்சாரப் பின்னணிகளில் UI மேம்பாட்டில் நிலைத்தன்மையை ஊக்குவிக்கிறது, இது பெரிய, சர்வதேச திட்டங்களுக்குள் உராய்வைக் குறைத்து ஒத்துழைப்பை மேம்படுத்துகிறது.

முடிவுரை

React Fragments, React சுற்றுச்சூழல் அமைப்பில் ஒரு நுட்பமான ஆனால் ஆழ்ந்த தாக்கத்தை ஏற்படுத்தும் அம்சத்தைக் குறிக்கின்றன. அவை JSX-இன் ஒரு அடிப்படைக் கட்டுப்பாட்டை - ஒற்றை மூலக் கூறுக்கான தேவை - உங்கள் ஒழுங்கமைக்கப்பட்ட HTML-இன் தூய்மை, செயல்திறன், அல்லது சொற்பொருள் ஒருமைப்பாட்டை சமரசம் செய்யாமல் தீர்க்கின்றன. கச்சிதமாக கட்டமைக்கப்பட்ட அட்டவணை வரிசைகளை உருவாக்குவதிலிருந்து, நெகிழ்வான நிபந்தனை ஒழுங்கமைத்தல் மற்றும் திறமையான பட்டியல் மேலாண்மை வரை, Fragments உருவாக்குநர்கள் அதிக வெளிப்படையான, பராமரிக்கக்கூடிய, மற்றும் செயல்திறன் மிக்க React பயன்பாடுகளை எழுத உதவுகின்றன.

உங்கள் திட்டங்களில் React Fragments-ஐ ஏற்றுக்கொள்வது என்பது, திறமையானது மட்டுமல்லாமல், ஒரு பன்முகப்பட்ட உலகளாவிய பார்வையாளர்களுக்கு அணுகக்கூடியதாகவும், வலுவானதாகவும் இருக்கும் உயர்-தர பயனர் இடைமுகங்களை உருவாக்குவதில் உறுதியுடன் இருப்பதாகும். தேவையற்ற DOM முனைகளை நீக்குவதன் மூலம், நீங்கள் பிழைத்திருத்தத்தை எளிதாக்குகிறீர்கள், நினைவக நுகர்வைக் குறைக்கிறீர்கள், மற்றும் உங்கள் CSS தளவமைப்புகள் அவற்றின் சிக்கலைப் பொருட்படுத்தாமல், நோக்கம் கொண்டபடி செயல்படுவதை உறுதி செய்கிறீர்கள். வெளிப்படையான <React.Fragment> மற்றும் சுருக்கமான சுருக்கெழுத்து <></> ஆகியவற்றுக்கு இடையேயான தேர்வு நெகிழ்வுத்தன்மையை வழங்குகிறது, இது ஒரு key prop தேவைப்படுகிறதா என்பதைப் பொறுத்து பொருத்தமான தொடரியலைத் தேர்வுசெய்ய உங்களை அனுமதிக்கிறது.

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