Пытанне

Чым прыкладанне, напісанае на React, адрозніваецца ад прыкладанняў, напісаных на натыўным JS (альбо JQuery)?

Кароткі адказ

1. React выкарыстоўвае дрэва кампанентаў (тое, што раней называлася Virtual DOM), JS працуе напрамкі з real DOM.

2. React - дэкларатыўны стыль праграмавання, JS - імператыўны

3. Зручна карыстацца JSX-сінтаксісам у React

4. Перавыкарыстоўваемыя кампаненты ў React

5. Абарона ад html-ін'екцый

6. React-прыкладанне патрабуе зборкі праекта для запуску ў акне браўзера. Старонку з JS можам праглядзець без уселякай зборкі.

Падрабязны адказ

1. 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 толькі туды, дзе яны адбыліся.

2. 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;

3. Зручна карыстацца JSX-сінтаксісам у React. Выкарыстоўваць JSX-сінтаксіс не абавязкова. Гэта назаўпрост сінтаксічны цукар для выкліка React.createElement. Сінтаксіс JSX падобны на html, але дазваляе выкарыстоўваць JS-выразы (насамрэч, ён бліжэй да JS, чым да html). Ім зручна карыстацца, таму што логіка для кампанента апісваецца побач з html-разметкай.

4. Перавыкарыстоўваемыя кампаненты ў React. Можна адзіны раз напісаць кампанент з усей неабходнай логікай, а далей яго перавыкарыстойваць столькі разоў, колькі патрэбна.

5. абарона ад html-ін'екцый.

Напрыклад, калі на web-старонке існуе звычайны input для ўвода даных карыстальнікам, пры выкарыстоўванні vanilla JS распрацоўшчык павінен памятать пра магчымасць увода зламыснікам ў поле не толькі тэкста, але і html-тэгаў, і дадаткова прыняць меры. У выпадку выкарыстоўвання input у React-прыкладанні, усе ўведзеныя сімвалы экрануюцца React-ам і ўжываюцца як тэкст.

6. React-прыкладанне патрабуе зборкі праекта для запуску ў акне браўзера. Старонку з JS можам праглядзець без усялякай зборкі.

На заўвагу:

Выкарыстоўванне бібліятэк і фрэймворкаў, такіх як React, Angular, Vue зусім не абавязковае для распрацоўкі ўсіх без выключнасці сучасных прыкладанняў. Калі прыкладанне невялікае, у ім няшмат інтэрактыўнасці, рэдка аднаўляюцца даныя, то, можа, найлепшым выбарам будуць іншыя сучасныя фрэймворкі і бібліятэкі ці, наогул, натыўны JS.