Ինչպես է աշխատում React-ը?

React-ը JavaScript գրադարան է օգտագործողի ինտերֆեյսեր ստեղծելու համար:

React-ի հիմնական սկզբունքներն ու մեխանիզմները ներառում են՝

1. Կոմպոնենտների վրա հիմնված մոտեցում: Օգտագործողի ինտերֆեյսը բաժանվում է անկախ և վերաօգտագործելի կոմպոնենտների: Յուրաքանչյուր կոմպոնենտ ունի իր վիճակը (state) և հատկությունները (props), որոնք որոշում են նրա վարքագիծը և տեսքը:

2. Վիրտուալ DOM: React-ը ստեղծում է թեթև ներկայացում DOM ծառի հիշողության մեջ (վիրտուալ DOM): Երբ տվյալները փոխվում են (վիճակ կամ հատկություններ), React-ը կառուցում է նոր վիրտուալ DOM ծառ:

3. Ալգորիթմի համեմատության (Diffing) մեխանիզմ: React-ը համեմատում է նոր վիրտուալ DOM ծառը նախորդի հետ: Այս գործընթացը կոչվում է "diffing": Ալգորիթմը արագ գտնում է տարբերությունները ծառերի միջև:

4. Համապատասխանեցում (Reconciliation): Գտնված տարբերությունների հիման վրա React-ը հաշվարկում է նվազագույն գործողությունների հավաքածու, որը անհրաժեշտ է իրական DOM-ը թարմացնելու համար:

5. Իրական DOM-ի թարմացում: React-ը կիրառում է այդ նվազագույն փոփոխությունները իրական DOM-ին, ինչը նվազեցնում է ծախսատար DOM մանիպուլյացիայի գործողությունները և բարելավում է կատարողականությունը:

6. Մի ուղղությամբ տվյալների հոսք: React-ում տվյալները սովորաբար փոխանցվում են վերևից ներքև, ծնողական կոմպոնենտներից դեպի երեխաներ, props-ների միջոցով: Սա հեշտացնում է փոփոխությունների հետևելը և սխալների հայտնաբերումը:

7. JSX: JavaScript-ի սինտաքսի ընդլայնում, որը թույլ է տալիս նկարագրել UI-ի կառուցվածքը HTML-ի նման սինտաքսով, անմիջապես JavaScript կոդում: JSX-ը փոխարկվում է React-ի սովորական ֆունկցիաների կանչերին (օրինակ, React.createElement):

// Պարզ React կոմպոնենտի օրինակ
function WelcomeMessage(props) {
  return <h1>Բարև, {props.name}!</h1>;
}

// Կոմպոնենտի օգտագործում
const element = <WelcomeMessage name="Աշխարհ" />;