Ինչու ստեղծվեցին React նման գրադարանները և ինչ խնդիրներ են լուծում?

Բիբլիոթեքներ, ինչպիսիք են React-ը, ստեղծվել են ինտերակտիվ օգտագործողի ինտերֆեյսների (UI) զարգացման պարզեցման համար: Դրանք լուծում են մի շարք խնդիրներ, որոնք առաջանում են բարդ վեբ-հավելվածներ ստեղծելիս:

1. Կարգավիճակի կառավարում (State Management):

   • Բարդ վեբ-հավելվածները ունեն շատ դինամիկ տվյալներ: Դրանց փոփոխությունը և սինխրոնիզացիան տարբեր մասերի միջև դառնում է բարդ՝ օգտագործելով մաքուր JavaScript:
   • React-ը առաջարկում է դեկլարատիվ մոտեցում կարգավիճակի կառավարմանը: Դուք նկարագրում եք, թե ինչպես պետք է выгляделա UI-ն որոշակի կարգավիճակում, իսկ React-ը ինքն է հոգում DOM-ի թարմացման մասին:

2. DOM-ի մանիպուլյացիա (DOM Manipulation):

   • Ուղղակի DOM-ի մանիպուլյացիան դանդաղ է և բարդ հետևել, հատկապես մեծ փոփոխությունների դեպքում:
   • React-ը օգտագործում է վիրտուալ DOM: Այն ստեղծում է թեթևակեցված ներկայացում DOM-ի մասին հիշողության մեջ: Կարգավիճակի փոփոխության ժամանակ React-ը համեմատում է վիրտուալ DOM-ը նախորդ վիճակի հետ, գտնում է նվազագույն փոփոխությունները (diffing) և արդյունավետորեն թարմացնում է միայն փոփոխված մասերը իրական DOM-ում (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> {/* իրադարձության handler, փոփոխում է կարգավիճակը */}
    </div>
  );
}

// Կոմպոնենտի արտահանում՝ օգտագործելու համար այլ մասերում
export default Counter;

Համեմատության աղյուսակ ուղիղ DOM մանիպուլյացիայի և React-ի միջև:

Աспեկտ	Ուղիղ DOM մանիպուլյացիա	React
UI կառավարման	Հրամանային (պատմական)	Դեկլարատիվ (պայմանագրային)
Արտադրողականություն	Կարող է դանդաղ լինել մեծ փոփոխությունների դեպքում	Օպտիմիզացված վիրտուալ DOM-ի միջոցով
Վերօգտագործում	Նվազագույն	Բարձր (կոմպոնենտների միջոցով)
Պահպանելիություն	Նվազագույն մեծ նախագծերում	Բարձր (կառուցվածքի շնորհիվ)
Կարգավիճակի կառավարում	Հետին, բարդ սինխրոնիզացիա	Ներկառուցված մեխանիզմներ (state, hooks)