რატომ შეიქმნა React-ის მსგავსი ბიბლიოთეკები და რა პრობლემებს ხსნიან?

React போன்ற நூலகங்கள் இடைமுகங்களை (UI) எளிதாக்க உருவாக்கப்பட்டுள்ளன. அவை கடுமையான வலை பயன்பாடுகளை உருவாக்கும் போது ஏற்படும் சில பிரச்சனைகளை தீர்க்கின்றன:

1. பொதி மேலாண்மை (State Management):

   • கடுமையான வலை பயன்பாடுகளில் பல டைனமிக் தரவுகள் உள்ளன. அவற்றின் மாற்றம் மற்றும் இடைமுகத்தின் பகுதிகளுக்கு இடையேயான சிங்க்ரோனிசேஷன் சிக்கலானது:
   • React ஒரு டிக்ளரேட்டிவ் அணுகுமுறையை வழங்குகிறது. நீங்கள் UI எப்படி தோற்றமளிக்க வேண்டும் என்பதை விவரிக்கின்றீர்கள், React தானாகவே DOM-ஐ புதுப்பிக்கிறது:

2. DOM-ஐ கையாளுதல் (DOM Manipulation):

   • நேரடி DOM கையாளுதல் மெதுவாகவும், மாற்றங்களை கண்காணிப்பது கடினமாகவும் இருக்கிறது:
   • React ஒரு விர்டுவல் DOM-ஐ பயன்படுத்துகிறது. இது நினைவகத்தில் DOM-ஐ எளிதான முறையில் உருவாக்குகிறது. நிலை மாற்றும்போது, React விர்டுவல் DOM-ஐ முன்னைய நிலை உடன் ஒப்பிடுகிறது, குறைந்தபட்ச மாற்றங்களை கண்டறிகிறது (diffing) மற்றும் திறம்பட மாற்றங்களை செய்கிறது (reconciliation). இது செயல்திறனை அதிகரிக்கிறது:

3. கூட்டமைப்புகளை மீண்டும் பயன்படுத்தல் (Component Reusability):

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

4. வலைமைப்புக் கடுமை (Architectural Complexity):

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

5. டிக்ளரேட்டிவ் நிரலாக்கம் (Declarative Programming):

   • பாரம்பரிய கட்டளையிடும் (imperative) DOM நிரலாக்கம் UI-யின் மாற்றங்களை தெளிவாகக் குறிப்பிட வேண்டும்:
   • React விரும்பும் நேரத்தில் UI-யின் நிலையை விவரிக்கிறது. நீங்கள் என்ன காண விரும்புகிறீர்கள் என்று கூறுகிறீர்கள், எப்படி என்று அல்ல. இது குறியீட்டை எளிதாக்கி, முன்னறிவிக்கக்கூடியதாக மாற்றுகிறது:

6. பெரிய மற்றும் சிக்கலான பயன்பாடுகளை உருவாக்கல்:

   • React பெரிய குழுக்களுடன் масштабமான பயன்பாடுகளை உருவாக்க உதவுகிறது. கூறு-மையமான அணுகுமுறை மற்றும் தெளிவான கட்டமைப்பு ஒத்துழைப்பை மேலும் பயனுள்ளதாக செய்கிறது:

React இன் ஒரு எடுத்துக்காட்டு:

// React இல் எளிய செயல்பாட்டு கூறின் எடுத்துக்காட்டு
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // நிலை ஹுக்

  return (
    <div>
      <p>எண்ணிக்கை: {count}</p> {/* நிலையை காட்டும் */}
      <button onClick={() => setCount(count + 1)}>
        அதிகரிக்கவும்
      </button> {/* நிகழ்வு கையாளும், நிலையை மாற்றும் */}
    </div>
  );
}

// மற்ற பகுதிகளில் பயன்படுத்த ஏற்றுமதி செய்க
export default Counter;

விரிவான DOM மற்றும் React ஒப்பீட்டு அட்டவணை:

அம்சம்	நேரடி DOM கையாளுதல்	React
UI மேலாண்மை	கட்டளையிடும் (imperative)	டிக்ளரேட்டிவ் (விவரிப்பு நிலை)
திறன்	பெரிய மாற்றங்களில் மெதுவாக இருக்கலாம்	விர்டுவல் DOM மூலம் சிறந்தது
மீண்டும் பயன்படுத்தும்	குறைவான	உயர் (கூறு மூலம்)
பராமரிப்பு	குறைவான, பெரிய திட்டங்களில் கடினம்	உயர் (கட்டமைப்பின் மூலம்)
நிலை மேலாண்மை	கைமுறை, சிக்கலான சிங்க்ரோனிசேஷன்	உள்ளமைக்கப்பட்ட முறைகள் (state, hooks)