Հոդվածը համեմատություն չէ երկու լուծումների միջև: Սա արտացոլում է այն մասին, թե ինչու կարող եք հաշվի առնել React-ը որպես ձեր լուծում օգտագործելը: Անիմաստ է համեմատել խնձորն ու նարինջը։ Բայց իմաստ ունի արտացոլել, թե ինչու կարող եք օգտագործել կամ ինչու եք ընտրել ձեռքի տակ գտնվող հատուկ գործիք:

Այն ապացուցված է մասշտաբով

React-ը առանցքային դեր է խաղում աշխարհի ամենամեծ սոցիալական մեդիա հարթակում՝ Facebook-ում: Այն ապացուցված է զանգվածային մասշտաբով և ունի ծրագրավորողների նվիրված թիմ Facebook-ում՝ ընկերությունից դուրս հարյուրավոր այլ ներդրողների հետ:

Instagram-ը՝ աշխարհի ամենամեծ կայքերից մեկը, նույնպես կառուցված է React-ի միջոցով՝ և՛ վեբկայքով, և՛ բջջային հավելվածով: Netflix, Twitter, Uber, BBC, Airbnb, Dropbox, Lyft և NBC.com (որը Lullabot-ի թիմն օգնեց կառուցել) մի քանի այլ օրինակներ են: լայնածավալ հավելվածներ, որոնք ստեղծվել են React-ի միջոցով:

լավ, բայց նախ պետք է հասկանանք, թե ինչ է React-ը:

Ի՞նչ է React-ը:

Ես երկար ժամանակ պայքարեցի՝ փորձելով հասկանալ React-ը: Սա այն է, ինչ ես կցանկանայի, որ ինչ-որ մեկը ինձ ասեր:

Ինչպե՞ս է React-ը համեմատում Angular, Ember, Backbone, VueJS-ի հետ: Ինչպե՞ս եք վարվում տվյալների հետ: Ինչպե՞ս կապվել սերվերի հետ: Ի՞նչ է JSX-ը: Ի՞նչ է «բաղադրիչը»:

React-ի ներածություն

React aka-ն (React.Js կամ ReactJS) JavaScript գրադարան է: Մշակվել է Facebook-ի կողմից 2013 թվականի մարտին, ներկայումս այն հանդիսանում է JavaScript-ի ամենահայտնի շրջանակը/գրադարանը: Այն օգտագործում է օգտատերերի արագ միջերեսներ կառուցելու համար: .React-ը հեշտացնում է մեկ էջի հավելվածի մշակումը, քանի որ այն վիրտուալ DOM-ի մոգությամբ բաղադրիչ բազա է: Նաև հեշտ է սովորել գրադարանը: JavaScript-ի նորմալ մշակողը կարող է սովորել այս գրադարանը 1-ից 2 ամսում: React-ի արժեքը իմանալու համար նախ պետք է նայենք Single page Application, Virtual DOM-ին:

React-ը SPA շրջանակ չէ, այլ դիտման գրադարան: Դա V-ն է MVC-ում (model view controller): Այն թույլ է տալիս միայն զննարկիչում բաղադրիչները ներկայացնել որպես դիտելի տարրեր: Այնուամենայնիվ, React-ի շուրջ ողջ էկոհամակարգը հնարավորություն է տալիս ստեղծել մեկ էջի հավելվածներ: React-ը հեշտացնում է մեկ էջի հավելվածի մշակումը, քանի որ այն բաղադրիչի վրա հիմնված գրադարան է՝ Virtual DOM-ի տարրով: React-ն օգտագործվում է UI (User Interface) կառուցման համար: React-ն օգտագործվում է մեկ էջի հավելված (SPA) մշակելու համար, մինչդեռ React Native-ը, որը React-ի շրջանակն է, մենք կարող ենք ստեղծել հիբրիդային բջջային հավելվածներ:

«React-ը JavaScript գրադարան է» ենթադրյալ իմաստը հասկանալու համար մենք պետք է հայացք գցենք Framework And Library, SPA & MPA և Virtual DOM & Real DOM-ի միջև եղած տարբերություններին:

Շրջանակ VS գրադարան

Ի՞նչ է գրադարանը:

Գրադարանը պարզապես սահմանված դասերի հավաքածու է: Պատճառը պարզապես կրկնել կոդը է, այսինքն՝ ստանալ այն կոդը, որն արդեն գրվել է այլ մշակողների կողմից: Դասերը և մեթոդները սովորաբար սահմանում են որոշակի գործողություններ տիրույթի հատուկ տարածքում: Օրինակ, կան մաթեմատիկայի մի քանի գրադարաններ, որոնք կարող են թույլ տալ ծրագրավորողին պարզապես կանչել ֆունկցիան՝ առանց ալգորիթմի աշխատանքի մասին կրկնելու:

Ի՞նչ է Framework-ը:

Շրջանակը սովորաբար ավելի բարդ է: Այն սահմանում է կմախք, որտեղ հավելվածը սահմանում է իր առանձնահատկությունները՝ կմախքը լրացնելու համար: Այս կերպ, ձեր կոդը կկանչվի շրջանակի կողմից, երբ տեղին լինի: Օգուտն այն է, որ մշակողները կարիք չունեն անհանգստանալու այն մասին, որ դիզայնը լավ է, թե ոչ, այլ պարզապես տիրույթի հատուկ գործառույթներ իրականացնելու համար:

Մեկ էջի հավելված (SPA) ընդդեմ բազմաէջային հավելվածի (MPA)

SPA-ի, ինչպես նաև MPA-ի շատ դրական և բացասական կողմեր ​​կան: Հուսով եմ, որ ստորև բերված տողերը կպարզեն այս երկու դիզայնի օրինաչափությունների միջև եղած տարբերությունները և ձեզ ավելի կմոտեցնեն այն կետին, որտեղ դուք կիմանաք, թե ինչպիսի կիրառություն է ավելի շատ համապատասխանում ձեր գաղափարին: Եվ իրականություն դարձրեք ձեր գաղափարը սեփական հավելվածի մասին:

Մեկ էջի հավելված Aka (SPA)

Մեկ էջանոց հավելվածըհավելված է, որն աշխատում է դիտարկիչում և օգտագործման ընթացքում չի պահանջում էջի վերաբեռնում: SPA-ն արագ է, քանի որ ռեսուրսների մեծ մասը (HTML + CSS + Սկրիպտներ) բեռնվում են միայն մեկ անգամ կիրառման ողջ կյանքի ընթացքում: Միայն տվյալները փոխանցվում են ետ ու առաջ: Առանց ամբողջ DOM-ի վերարտադրման՝ այն դինամիկ կերպով թարմացնում է հավելվածի փոփոխված բաղադրիչները՝ օգտագործելով Վիրտուալ DOM:

Դուք ամեն օր օգտագործում եք այս տեսակի հավելվածները: Սրանք, օրինակ, Gmail-ը, Google Maps-ը, Facebook-ը կամ GitHub-ը:
SPA-ները նախատեսված են հիանալի UX-ի սպասարկման մասին՝ փորձելով ընդօրինակել «բնական» միջավայրը բրաուզերում՝ առանց էջի վերաբեռնման, առանց լրացուցիչ սպասման ժամանակի: Դա ընդամենը մեկ վեբ էջ է, որը դուք այցելում եք, որն այնուհետև բեռնում է բոլոր մյուս բովանդակությունը՝ օգտագործելով JavaScript, որից նրանք մեծապես կախված են:

Բազմէջանոց հավելված (MPA)

Բազմէջանոց հավելվածները աշխատում են «ավանդական» եղանակով: Յուրաքանչյուր փոփոխություն, օրինակ. ցուցադրել տվյալները կամ վերադարձնել տվյալները սերվերի հարցումներին՝ զննարկիչում սերվերից նոր էջ ներկայացնելով: Այս հավելվածները մեծ են, ավելի մեծ, քան SPA-ները, քանի որ դրանք պետք է լինեն: Բովանդակության քանակի պատճառով այս հավելվածներն ունեն UI-ի բազմաթիվ մակարդակներ: Բարեբախտաբար, դա այլևս խնդիր չէ: AJAX-ի շնորհիվ մենք չպետք է անհանգստանանք, որ մեծ և բարդ հավելվածները պետք է շատ տվյալներ փոխանցեն սերվերի և բրաուզերի միջև: Այդ լուծումը բարելավվում է, և այն թույլ է տալիս թարմացնել հավելվածի միայն որոշակի հատվածներ: Մյուս կողմից, այն ավելացնում է ավելի բարդություն և ավելի դժվար է զարգացնել, քան մեկ էջանոց հավելվածը:

Վիրտուալ DOM ընդդեմ DOM

Վիրտուալ DOM-ը DOM-ի թեթև աբստրակցիա է: Դուք կարող եք այն համարել որպես DOM-ի պատճեն, որը կարող է թարմացվել՝ առանց ազդելու իրական DOM-ի վրա: Այն ունի բոլոր նույն հատկությունները, ինչ իրական DOM օբյեկտը, բայց չունի իրական DOM-ի նման էկրանին գրելու հնարավորություն: Վիրտուալ DOMարտահայտման մեթոդ է DOM տարրում պարզ հարթության JavaScript օբյեկտը հիշողությունից դուրս բերելու համար: React-ը որդեգրեց այս մեթոդը՝ իրերն արագ իրականացնելու համար, քանի որ այն թեթև է և պահվում է հիշողության մեջ, այնպես որ կարիք չկա նոր հում DOM բաղադրիչ ներկայացնել: Վիրտուալ DOM-ը երբեք չի ներկայացնում իրական DOM տարր կամ թիրախավորում որևէ DOM տարր: Ամեն անգամ, երբ որևէ բաղադրիչի վիճակը փոխվում է, այն համընկնում է այդ բաղադրիչի հիշողությունից և ընտրում է միայն դրա փոփոխված մասը և արտապատկերում: Այս մեթոդը նաև հայտնի է որպես Shadow DOM:

React vs Angular

Angular-ը JS շրջանակ է front-end-ի զարգացման համար: Դա արտադրանքի երկրորդ տարբերակն է, որն աջակցվում է Google-ի կողմից: Առաջին տարբերակը, որը հայտնի է որպես AngularJS, մեղադրվում էր ավելորդ բարդության մեջ: Այսպիսով, նրա գրեթե բոլոր հասկացությունները (մոդուլներ, կարգավորիչներ, շրջանակներ, հրահանգներ և այլն) փոխարինվեցին Angular 2-ում, որը կոչվում է Angular: Angular-ը ստացել է նաև մի քանի նոր հնարավորություններ, ինչպիսիք են հավելվածների աջակցությունը և սերվերի կողմից մատուցումը, մինչդեռ React-ը կամ ReactJS-ը JS-ի վրա հիմնված գրադարան է JSX կոմպիլյատորով, որը կենտրոնացած է օգտատերերի ինտերֆեյսներում վերօգտագործվող UI դիտումների բաղադրիչների վրա: Զգույշ եղեք պայմանների հետ. React-ը MVC շրջանակ չէ, այն բաց կոդով գրադարան է դիտումների մատուցման համար: React-ով ստեղծված UI-ները շատ արձագանքող են և սահուն բեռնվում են:

Կաղապարավորում

Երբ դուք ստեղծում եք JS արտադրանք, դուք, անշուշտ, ցանկանում եք օգուտ քաղել միջերեսներ ստեղծելու համար կաղապարներ օգտագործելուց: Angular-ն օգտագործում է ձևանմուշներ TypeScript ֆայլերում, մինչդեռ React-ն օգտագործում է ձևանմուշներ JSX ֆայլերում:

Ներկայացում

Կարող է լինել մատուցման երկու եղանակ՝ հաճախորդի կողմից և սերվերի կողմից: Հաճախորդի կողմից մատուցումը բացասաբար է անդրադառնում էջերի բեռնման վրա, և Angular-ի առաջին տարբերակը նման խնդիր ուներ: Այնուամենայնիվ, այն ուղղվեց, և այժմ և՛ Angular, և՛ React-ն ունեն սերվերի կողմից մատուցման հնարավորություններ: