ரியாக்ட் ரெஃப் பேட்டர்ன்கள்: டைனமிக் UI-களுக்கான DOM கையாளுதல் நுட்பங்கள்

ரியாக்ட், பயனர் இடைமுகங்களை (user interfaces) உருவாக்குவதற்கான ஒரு சக்திவாய்ந்த ஜாவாஸ்கிரிப்ட் லைப்ரரி, இது பொதுவாக UI உருவாக்கத்திற்கு ஒரு அறிவிப்பு அணுகுமுறையை (declarative approach) ஊக்குவிக்கிறது. இருப்பினும், சில நேரங்களில், ஆவண பொருள் மாதிரி (Document Object Model - DOM) நேரடியாகக் கையாள வேண்டியது அவசியமாகிறது. இங்குதான் ரியாக்ட் ரெஃப்ஸ் (refs) devreக்கு வருகின்றன. ரெஃப்ஸ், ரெண்டர் முறையில் உருவாக்கப்பட்ட DOM நோட்கள் அல்லது ரியாக்ட் எலிமென்ட்களை அணுக ஒரு வழியை வழங்குகின்றன. இந்த விரிவான வழிகாட்டி, DOM-ஐ திறம்பட கையாளுதல், ஃபோகஸை நிர்வகித்தல், மூன்றாம் தரப்பு லைப்ரரிகளுடன் ஒருங்கிணைத்தல் மற்றும் UI செயல்திறனை மேம்படுத்துவதற்கான பல்வேறு ரியாக்ட் ரெஃப் பேட்டர்ன்கள் மற்றும் நுட்பங்களை ஆராய்கிறது. ரியாக்ட் டெவலப்பர்களின் உலகளாவிய பார்வையாளர்களுக்கு ஏற்ற நடைமுறை எடுத்துக்காட்டுகள் மற்றும் சிறந்த நடைமுறைகளை நாம் ஆராய்வோம்.

ரியாக்ட் ரெஃப்ஸ்களைப் புரிந்துகொள்ளுதல்

அதன் மையத்தில், ஒரு ரெஃப் என்பது current என்ற பண்பைக் கொண்ட ஒரு சாதாரண ஜாவாஸ்கிரிப்ட் ஆப்ஜெக்ட் ஆகும். இந்த பண்பு மாற்றக்கூடியது (mutable), இது ஒரு DOM நோட் அல்லது ஒரு ரியாக்ட் காம்போனென்ட் நிகழ்வு உட்பட எந்த மதிப்பையும் சேமிக்க உங்களை அனுமதிக்கிறது. ரெஃப்ஸ்களை உருவாக்க ரியாக்ட் இரண்டு முதன்மை வழிகளை வழங்குகிறது: React.createRef() (கிளாஸ் காம்போனென்ட்கள்) மற்றும் useRef() ஹூக் (ஃபங்ஷனல் காம்போனென்ட்கள்).

React.createRef() (கிளாஸ் காம்போனென்ட்கள்)

React.createRef() ஒரு ரெஃப் ஆப்ஜெக்ட்டை உருவாக்குகிறது, இது ஒரு கிளாஸ் காம்போனென்ட் நிகழ்வின் பண்பிற்கு ஒதுக்கப்படுகிறது. இந்த ரெஃப், காம்போனென்ட்டின் வாழ்க்கைச் சுழற்சி முழுவதும் நீடித்திருக்கும்.

            
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    // Access the DOM node after the component mounts
    console.log(this.myRef.current); // DOM node or null
  }

  render() {
    return 
Hello, world!
;
  }
}

            

              
                Copy
              
            
          

useRef() (ஃபங்ஷனல் காம்போனென்ட்கள்)

useRef() ஹூக் ஒரு மாற்றக்கூடிய ரெஃப் ஆப்ஜெக்ட்டை உருவாக்குகிறது, அதன் .current பண்பு அனுப்பப்பட்ட ஆர்குமென்ட் (initialValue) உடன் தொடங்கப்படுகிறது. திரும்பப் பெறப்பட்ட ரெஃப் ஆப்ஜெக்ட், காம்போனென்ட்டின் முழு ஆயுட்காலத்திற்கும் நீடித்திருக்கும்.

            
import React, { useRef, useEffect } from 'react';

function MyFunctionalComponent() {
  const myRef = useRef(null);

  useEffect(() => {
    // Access the DOM node after the component mounts
    console.log(myRef.current); // DOM node or null
  }, []); // Empty dependency array ensures this runs only once on mount

  return 
Hello, world!
;
}

            

              
                Copy
              
            
          

ரியாக்ட் ரெஃப்ஸ்களுக்கான பொதுவான பயன்பாட்டு வழக்குகள்

ரெஃப்ஸ் நம்பமுடியாத அளவிற்கு பல்துறை திறன் கொண்டவை மற்றும் ரியாக்ட் மேம்பாட்டில் பல்வேறு சூழ்நிலைகளில் பயன்பாட்டைக் காண்கின்றன.

1. DOM நோட்களை அணுகுதல் மற்றும் கையாளுதல்

ரெஃப்ஸ்களின் மிகவும் பொதுவான பயன்பாடு DOM நோட்களை நேரடியாக அணுகி கையாளுவதாகும். ஒரு உள்ளீட்டுப் புலத்தில் (input field) கவனம் செலுத்துதல், ஒரு எலிமென்டிற்கு ஸ்க்ரோல் செய்தல் அல்லது அதன் பரிமாணங்களை அளவிடுதல் போன்ற பணிகளுக்கு இது பயனுள்ளதாக இருக்கும்.

            
import React, { useRef, useEffect } from 'react';

function FocusInput() {
  const inputRef = useRef(null);

  useEffect(() => {
    // Focus the input field after the component mounts
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return ;
}

            

              
                Copy
              
            
          

எடுத்துக்காட்டு: பல-படிவப் படிவத்தை (multi-step form) உருவாக்குவதாகக் கற்பனை செய்து பாருங்கள். ஒரு பயனர் ஒரு புலத்தை முடித்ததும், அடுத்த உள்ளீட்டில் தானாகவே கவனம் செலுத்த நீங்கள் விரும்பலாம். ரெஃப்ஸ் இதை தடையின்றி செய்கின்றன.

2. ஃபோகஸ், டெக்ஸ்ட் தேர்வு மற்றும் மீடியா பிளேபேக்கை நிர்வகித்தல்

ஃபோகஸ், எலிமென்ட்களுக்குள் டெக்ஸ்ட் தேர்வு மற்றும் மீடியா பிளேபேக்கை (எ.கா., வீடியோ அல்லது ஆடியோ) நிர்வகிப்பதில் நுணுக்கமான கட்டுப்பாட்டிற்கு ரெஃப்ஸ் அவசியம்.

            
import React, { useRef, useEffect } from 'react';

function VideoPlayer() {
  const videoRef = useRef(null);

  const playVideo = () => {
    if (videoRef.current) {
      videoRef.current.play();
    }
  };

  const pauseVideo = () => {
    if (videoRef.current) {
      videoRef.current.pause();
    }
  };

  return (
    

      
      Play
      Pause
    
  );
}

            

              
                Copy
              
            
          

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

3. மூன்றாம் தரப்பு லைப்ரரிகளுடன் ஒருங்கிணைத்தல்

பல மூன்றாம் தரப்பு ஜாவாஸ்கிரிப்ட் லைப்ரரிகள் DOM-ஐ நேரடியாகக் கையாளுகின்றன. ரெஃப்ஸ், ரியாக்ட்டின் அறிவிப்பு மாதிரிக்கும் (declarative model) இந்த கட்டாய லைப்ரரிகளுக்கும் (imperative libraries) இடையே ஒரு பாலத்தை வழங்குகின்றன.

            
import React, { useRef, useEffect } from 'react';
import Chart from 'chart.js/auto'; // Example: Using Chart.js

function ChartComponent() {
  const chartRef = useRef(null);

  useEffect(() => {
    if (chartRef.current) {
      const ctx = chartRef.current.getContext('2d');
      new Chart(ctx, {
        type: 'bar',
        data: {
          labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
          datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            borderWidth: 1
          }]
        },
        options: {
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      });
    }
  }, []);

  return ;
}

            

              
                Copy
              
            
          

சர்வதேசமயமாக்கல் குறிப்பு: தேதிகள், எண்கள் அல்லது நாணயங்களைக் கையாளும் மூன்றாம் தரப்பு லைப்ரரிகளை ஒருங்கிணைக்கும்போது, பயனரின் வட்டாரத்தை (locale) ஆதரிக்கும் வகையில் அவை சரியாக உள்ளமைக்கப்பட்டுள்ளதா என்பதை உறுதிப்படுத்தவும். பல லைப்ரரிகள் விரும்பிய வட்டாரத்தைக் குறிப்பிடுவதற்கான விருப்பங்களை வழங்குகின்றன. உதாரணமாக, தேதி வடிவமைப்பு லைப்ரரிகள், பயனரின் மொழி மற்றும் பிராந்தியத்துடன் தொடங்கப்பட வேண்டும், இதனால் தேதிகள் சரியான வடிவத்தில் (எ.கா., MM/DD/YYYY எதிராக DD/MM/YYYY) காட்டப்படும்.

4. கட்டாய அனிமேஷன்களைத் தூண்டுதல்

ஃப்ரேமர் மோஷன் மற்றும் ரியாக்ட் டிரான்சிஷன் குரூப் போன்ற ரியாக்ட் லைப்ரரிகள் பெரும்பாலான அனிமேஷன் தேவைகளுக்கு விரும்பப்பட்டாலும், நுணுக்கமான கட்டுப்பாடு தேவைப்படும்போது கட்டாய அனிமேஷன்களுக்கு ரெஃப்ஸ்களைப் பயன்படுத்தலாம்.

            
import React, { useRef, useEffect } from 'react';

function FadeIn() {
  const elementRef = useRef(null);

  useEffect(() => {
    const element = elementRef.current;
    if (element) {
      element.style.opacity = 0; // Initially hidden
      let opacity = 0;
      const intervalId = setInterval(() => {
        opacity += 0.05;
        element.style.opacity = opacity;
        if (opacity >= 1) {
          clearInterval(intervalId);
        }
      }, 20); // Adjust interval for speed

      return () => clearInterval(intervalId); // Cleanup on unmount
    }
  }, []);

  return 
Fade In!
;
}

            

              
                Copy
              
            
          

5. எலிமென்ட் பரிமாணங்களை அளவிடுதல்

DOM-இல் உள்ள எலிமென்ட்களின் பரிமாணங்களை (அகலம், உயரம்) துல்லியமாக அளவிட ரெஃப்ஸ் உங்களை அனுமதிக்கின்றன. ரெஸ்பான்சிவ் லேஅவுட்கள், டைனமிக் பொசிஷனிங் மற்றும் தனிப்பயன் காட்சி விளைவுகளை உருவாக்குவதற்கு இது பயனுள்ளதாக இருக்கும்.

            
import React, { useRef, useEffect, useState } from 'react';

function MeasureElement() {
  const elementRef = useRef(null);
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });

  useEffect(() => {
    const element = elementRef.current;
    if (element) {
      const width = element.offsetWidth;
      const height = element.offsetHeight;
      setDimensions({ width, height });
    }
  }, []);

  return (
    

      
Measure This Element
      
Width: {dimensions.width}px
      
Height: {dimensions.height}px
    
  );
}

            

              
                Copy
              
            
          

மேம்பட்ட ரெஃப் பேட்டர்ன்கள்

createRef மற்றும் useRef-இன் அடிப்படை பயன்பாட்டிற்கு அப்பால், பல மேம்பட்ட பேட்டர்ன்கள் மிகவும் சிக்கலான சூழ்நிலைகளுக்கு ரெஃப்ஸ்களைப் பயன்படுத்துகின்றன.

1. கால்பேக் ரெஃப்ஸ்

கால்பேக் ரெஃப்ஸ் DOM நோட்களை அணுகுவதற்கான ஒரு நெகிழ்வான வழியை வழங்குகின்றன. ஒரு ரெஃப் ஆப்ஜெக்ட்டை ஒதுக்குவதற்குப் பதிலாக, நீங்கள் ref பண்பிற்கு ஒரு ஃபங்ஷனை ஒதுக்குகிறீர்கள். காம்போனென்ட் மவுன்ட் ஆகும்போது DOM நோடுடனும், அன்மவுன்ட் ஆகும்போது null உடனும் ரியாக்ட் இந்த ஃபங்ஷனை அழைக்கும்.

            
import React, { useState } from 'react';

function CallbackRefExample() {
  const [element, setElement] = useState(null);

  const setRef = (node) => {
    setElement(node);
  };

  return (
    

      
This element's ref is being managed by a callback.
      {element && 
Element: {element.tagName}
}
    
  );
}

            

              
                Copy
              
            
          

ரெஃப் அமைக்கப்படும்போது அல்லது அழிக்கப்படும்போது கூடுதல் செயல்களைச் செய்ய வேண்டியிருக்கும் போது கால்பேக் ரெஃப்ஸ் குறிப்பாக பயனுள்ளதாக இருக்கும்.

2. ஃபார்வர்டிங் ரெஃப்ஸ் (forwardRef)

React.forwardRef என்பது ஒரு காம்போனென்ட் அதன் பெற்றோர் காம்போனென்டில் இருந்து அனுப்பப்பட்ட ஒரு ரெஃப்பைப் பெற அனுமதிக்கும் ஒரு நுட்பமாகும். ஒரு சைல்டு காம்போனென்டில் இருந்து ஒரு DOM நோடை அதன் பெற்றோருக்கு வெளிப்படுத்த விரும்பும்போது இது பயனுள்ளதாக இருக்கும்.

            
import React, { forwardRef } from 'react';

const MyInput = forwardRef((props, ref) => {
  return ;
});

function ParentComponent() {
  const inputRef = React.useRef(null);

  const focusInput = () => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };

  return (
    

      
      Focus Input
    
  );
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், MyInput ரெஃப்பை உள்ளிருக்கும் உள்ளீட்டு எலிமென்டிற்கு ஃபார்வர்டு செய்கிறது, இது ParentComponent-ஐ நேரடியாக உள்ளீட்டை அணுகவும் கையாளவும் அனுமதிக்கிறது.

3. ரெஃப்ஸ் மூலம் காம்போனென்ட் மெத்தட்களை வெளிப்படுத்துதல்

ஒரு சைல்டு காம்போனென்டில் இருந்து அதன் பெற்றோருக்கு மெத்தட்களை வெளிப்படுத்தவும் ரெஃப்ஸ் பயன்படுத்தப்படலாம். கட்டாய API-களுடன் மீண்டும் பயன்படுத்தக்கூடிய காம்போனென்ட்களை உருவாக்குவதற்கு இது பயனுள்ளதாக இருக்கும்.

            
import React, { useRef, useImperativeHandle, forwardRef } from 'react';

const FancyInput = forwardRef((props, ref) => {
  const inputRef = useRef(null);

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
    getValue: () => {
      return inputRef.current.value;
    }
  }));

  return ;
});

function ParentComponent() {
  const fancyInputRef = useRef(null);

  const handleFocus = () => {
    fancyInputRef.current.focus();
  };

  const handleGetValue = () => {
    alert(fancyInputRef.current.getValue());
  };

  return (
    

      
      Focus Input
      Get Value
    
  );
}

            

              
                Copy
              
            
          

useImperativeHandle ஹூக், forwardRef-ஐப் பயன்படுத்தும் போது பெற்றோர் காம்போனென்ட்களுக்கு வெளிப்படுத்தப்படும் நிகழ்வு மதிப்பைத் தனிப்பயனாக்க உங்களை அனுமதிக்கிறது. இது சைல்டின் மெத்தட்களுக்கு கட்டுப்படுத்தப்பட்ட அணுகலை அனுமதிக்கிறது.

ரியாக்ட் ரெஃப்ஸ்களைப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

ரெஃப்ஸ் சக்திவாய்ந்த திறன்களை வழங்கினாலும், அவற்றை நியாயமாகப் பயன்படுத்துவதும் சிறந்த நடைமுறைகளைப் பின்பற்றுவதும் முக்கியம்.

• அதிகப்படியான DOM கையாளுதலைத் தவிர்க்கவும்: ரியாக்ட்டின் அறிவிப்பு அணுகுமுறை பொதுவாக மிகவும் திறமையானது. ரியாக்ட்டின் ஸ்டேட் மேனேஜ்மென்ட் மூலம் எளிதில் அடைய முடியாத பணிகளுக்கு மட்டுமே ரெஃப்ஸ்களைப் பயன்படுத்தவும்.
• ரெஃப்ஸ்களை குறைவாகப் பயன்படுத்தவும்: ரெஃப்ஸ்களை அதிகமாகப் பயன்படுத்துவது பராமரிக்கவும் புரிந்துகொள்ளவும் கடினமான குறியீட்டிற்கு வழிவகுக்கும்.
• காம்போனென்ட் வாழ்க்கைச் சுழற்சியைக் கவனத்தில் கொள்ளவும்: காம்போனென்ட் மவுன்ட் ஆன பிறகு மட்டுமே ஒரு ரெஃப்பின் .current பண்பை அணுகுவதை உறுதிசெய்யவும் (எ.கா., componentDidMount அல்லது useEffect-இல்). அதற்கு முன் அணுகுவது null மதிப்புகளை விளைவிக்கலாம்.
• ரெஃப்ஸ்களை சுத்தம் செய்யவும்: கால்பேக் ரெஃப்ஸ்களைப் பயன்படுத்தும்போது, காம்போனென்ட் அன்மவுன்ட் ஆகும்போது மெமரி லீக்குகளைத் தடுக்க ரெஃப்பை null ஆக அமைப்பதை உறுதிசெய்யவும்.
• மாற்று வழிகளைக் கருத்தில் கொள்ளவும்: ரெஃப்ஸ்களை நாடும் முன், ரியாக்ட்டின் ஸ்டேட் மேனேஜ்மென்ட் அல்லது கட்டுப்படுத்தப்பட்ட காம்போனென்ட்கள் விரும்பிய நடத்தையை அடைய முடியுமா என்பதை ஆராயுங்கள்.
• அணுகல்தன்மை: ஃபோகஸைக் கையாளும்போது, குறைபாடுகள் உள்ள பயனர்களுக்குப் பயன்பாடு அணுகக்கூடியதாக இருப்பதை உறுதிசெய்யவும்.

ரெஃப் பயன்பாட்டிற்கான உலகளாவிய பரிசீலனைகள்

உலகளாவிய பார்வையாளர்களுக்காகப் பயன்பாடுகளை உருவாக்கும்போது, ரெஃப்ஸ்களைப் பயன்படுத்தும்போது பின்வரும் அம்சங்களைக் கருத்தில் கொள்ளுங்கள்:

• வலமிருந்து இடமாக (RTL) லேஅவுட்கள்: லேஅவுட் தொடர்பான DOM எலிமென்ட்களைக் கையாளும்போது (எ.கா., ஸ்க்ரோலிங்), அரபு மற்றும் ஹீப்ரு போன்ற மொழிகளுக்கான RTL லேஅவுட்களை உங்கள் குறியீடு சரியாகக் கையாளுகிறது என்பதை உறுதிப்படுத்தவும். scrollLeft மற்றும் scrollWidth போன்ற பண்புகளைக் கவனமாகப் பயன்படுத்தவும் மற்றும் லேஅவுட்டின் திசையின் அடிப்படையில் அவற்றை இயல்பாக்கலாம்.
• உள்ளீட்டு முறை திருத்திகள் (IMEs): சில பிராந்தியங்களில் உள்ள பயனர்கள் உரையை உள்ளிட IMEs-ஐப் பயன்படுத்தலாம் என்பதை அறிந்து கொள்ளுங்கள். ஃபோகஸ் அல்லது டெக்ஸ்ட் தேர்வை நிர்வகிக்கும்போது, உங்கள் குறியீடு IMEs உடன் சரியாக தொடர்பு கொள்கிறது மற்றும் பயனரின் உள்ளீட்டில் தலையிடாது என்பதை உறுதிப்படுத்தவும்.
• எழுத்துரு ஏற்றுதல்: எழுத்துருக்கள் முழுமையாக ஏற்றப்படுவதற்கு முன்பு நீங்கள் எலிமென்ட் பரிமாணங்களை அளந்தால், ஆரம்ப அளவீடுகள் தவறாக இருக்கலாம். இந்த அளவீடுகளை நம்புவதற்கு முன்பு எழுத்துருக்கள் ஏற்றப்பட்டிருப்பதை உறுதிசெய்ய நுட்பங்களைப் பயன்படுத்தவும் (எ.கா., document.fonts.ready-ஐப் பயன்படுத்தி). வெவ்வேறு எழுத்து முறைகள் (எ.கா., லத்தீன், சிரிலிக், CJK) மிகவும் மாறுபட்ட எழுத்துரு அளவுகள் மற்றும் அளவீடுகளைக் கொண்டுள்ளன.
• பயனர் விருப்பத்தேர்வுகள்: அனிமேஷன்கள் மற்றும் மாற்றங்களுக்கான பயனர் விருப்பத்தேர்வுகளைக் கருத்தில் கொள்ளுங்கள். சில பயனர்கள் குறைக்கப்பட்ட இயக்கத்தை விரும்பலாம். அனிமேஷன்களைத் தூண்டுவதற்கு ரெஃப்ஸ்களைப் பயன்படுத்தும்போது இந்த விருப்பத்தேர்வுகளை மதிக்கவும். பயனர் விருப்பத்தேர்வுகளைக் கண்டறிய `prefers-reduced-motion` CSS மீடியா வினவலைப் பயன்படுத்தவும்.

முடிவுரை

ரியாக்ட் ரெஃப்ஸ், DOM-ஐ நேரடியாகக் கையாளுதல், ஃபோகஸை நிர்வகித்தல், மூன்றாம் தரப்பு லைப்ரரிகளுடன் ஒருங்கிணைத்தல் மற்றும் UI செயல்திறனை மேம்படுத்துவதற்கான ஒரு சக்திவாய்ந்த கருவியாகும். வெவ்வேறு ரெஃப் பேட்டர்ன்களைப் புரிந்துகொள்வதன் மூலமும் சிறந்த நடைமுறைகளைப் பின்பற்றுவதன் மூலமும், ரியாக்ட்டின் அறிவிப்பு அணுகுமுறையின் நன்மைகளைப் பராமரிக்கும் போது நீங்கள் ரெஃப்ஸ்களை திறம்படப் பயன்படுத்தலாம். ஒரு மாறுபட்ட பார்வையாளர்களுக்காக உள்ளடக்கிய மற்றும் பயனர் நட்பு பயன்பாடுகளை உருவாக்க உலகளாவிய அணுகல்தன்மை மற்றும் சர்வதேசமயமாக்கல் அம்சங்களைக் கருத்தில் கொள்ள நினைவில் கொள்ளுங்கள். கவனமான திட்டமிடல் மற்றும் செயல்படுத்தல் மூலம், ரியாக்ட் ரெஃப்ஸ் உங்கள் ரியாக்ட் பயன்பாடுகளின் திறன்களையும் மற்றும் பதிலளிக்கும் தன்மையையும் கணிசமாக மேம்படுத்த முடியும்.