Разбор пытанняў з рэальных сумоўяў - React. Адрозненне прыкладанняў, напісаных на React ад прыкладанняў, напісаных на vanilla JS.
Пытанне
Чым прыкладанне, напісанае на React, адрозніваецца ад прыкладанняў, напісаных на натыўным JS (альбо JQuery)?
Кароткі адказ
-
React выкарыстоўвае дрэва кампанентаў (тое, што раней называлася
Virtual DOM
), JS працуе напрамкі зreal DOM
. -
React - дэкларатыўны стыль праграмавання, JS - імператыўны
-
Зручна карыстацца
JSX
-сінтаксісам у React -
Перавыкарыстоўваемыя кампаненты ў React
-
Абарона ад
html
-ін'екцый -
React-прыкладанне патрабуе зборкі праекта для запуску ў акне браўзера. Старонку з JS можам праглядзець без уселякай зборкі.
Падрабязны адказ
- React выкарыстоўвае
дрэва кампанентаў
(тое, што раней называласяVirtual DOM
), JS працуе напрамкі зreal DOM
. Калі распрацоўшчык выкарыстоўвае толькіreal DOM
, ён павінен крок за крокам абнаўляць яго уручную.
Аднаўленне real DOM
- гэта вузкае бутэлькавае рыльца пры распрацоўцы web
-прыкладанняў, таму што гэта дастаткова марудная і цяжкая аперацыя. Пры выкарыстоўванні JS, пры кожнай новай інструкцыі радок за радком real DOM
будзе абнаўляцца. Пры гэтым real DOM
будзе аднаўляцца цалкам.
React дазваляе сабраць неабходныя абнаўленні, спачатку абнавіць virtual DOM
. Гэта робіцца хутка, бо virtual DOM
- звычайныя JS-аб'екты. Потым параўноўвае real
і virtual DOM
і ўносіць змены ў real DOM
толькі туды, дзе яны адбыліся.
- React - декларатыўны стыль праграмавання (апісваем, што жадаем атрымаць), JS - імператыўны (апісваем, як будзем атрымліваць пажаданае). У выніку выкарыстоўвання
React
код атрымліваецца больш зразумелы і лягчэйшы для падтрымкі (лягчэй знайсці у кодзе патрэбныReact
-кампанент і выправіць у ім неабходнае месца, чым па ўсім кодзе шукаць месца, дзе мы змянілі колер загалоўка).
Выкарыстоўваем натыўны JS:
<h1>Вітанкі!!! Мяне завуць <b class="name"></b>.</h1> function setName(name) { const nameWrapper = document.querySelector(".name"); if (nameWrapper) { nameWrapper.textContent = name; } } setName("Вася");
Выкарыстоўваем React`-кампаненты:
import React from "react"; function Greeting (props) { return (<h1>Вітанкі!!! Мяне завуць <b>{props.name}</b></h1>); } export default Greeting;
-
Зручна карыстацца
JSX
-сінтаксісам у React. ВыкарыстоўвацьJSX
-сінтаксіс не абавязкова. Гэта назаўпрост сінтаксічны цукар для выклікаReact.createElement
. СінтаксісJSX
падобны наhtml
, але дазваляе выкарыстоўвацьJS
-выразы (насамрэч, ён бліжэй даJS
, чым даhtml
). Ім зручна карыстацца, таму што логіка для кампанента апісваецца побач зhtml
-разметкай. -
Перавыкарыстоўваемыя кампаненты ў React. Можна адзіны раз напісаць кампанент з усей неабходнай логікай, а далей яго перавыкарыстойваць столькі разоў, колькі патрэбна.
-
абарона ад
html
-ін'екцый.
Напрыклад, калі на web
-старонке існуе звычайны input
для ўвода даных карыстальнікам, пры выкарыстоўванні vanilla JS
распрацоўшчык павінен памятать пра магчымасць увода зламыснікам ў поле не толькі тэкста, але і html
-тэгаў, і дадаткова прыняць меры. У выпадку выкарыстоўвання input
у React-прыкладанні, усе ўведзеныя сімвалы экрануюцца React-ам і ўжываюцца як тэкст.
- React-прыкладанне патрабуе зборкі праекта для запуску ў акне браўзера. Старонку з
JS
можам праглядзець без усялякай зборкі.
На заўвагу:
Выкарыстоўванне бібліятэк і фрэймворкаў, такіх як React, Angular, Vue зусім не абавязковае для распрацоўкі ўсіх без выключнасці сучасных прыкладанняў. Калі прыкладанне невялікае, у ім няшмат інтэрактыўнасці, рэдка аднаўляюцца даныя, то, можа, найлепшым выбарам будуць іншыя сучасныя фрэймворкі і бібліятэкі ці, наогул, натыўны JS.
Каментары
(Каб даслаць каментар залагуйцеся ў свой уліковы запіс)