Терминологичен речник на React

Single-page Application

Single-page application е вид приложение, което зарежда една HTML страница заедно с всички необходими активи (например JavaScript и CSS) за цялостната му работа. Всяко последвало взаимодействие с тази страница или отварянето на последващи страници не изискват допълнителни заявки до сървъра или с други думи, страницата не се презарежда.

Въпреки, че можете да създадете Single-page application страница с React, това не е задължително изискване. React може да бъде използван и за подобряване на малки части от вече съществуващи уеб страници чрез добавяне на допълнителна интерактивност. Код написан на React може да съжителства съвместно с markup рендериран на сървъра (например от PHP) или с друга client-side библиотека. Всъщност, React се използва точно по този начин във Facebook.

ES6, ES2015, ES2016, и т.н.

Всички тези акроними се отнасят за най-скорошните версии на стандарта за спецификация на езика ECMAScript, като JavaScript е негова имплементация. Версия ES6 (още известна като ES2015) включва много нови допълнения към предшествениците си, като например: arrow функции, класове, шаблонни литерали, let и const. Можете да научите повече относно различните версии тук.

Компилатори

JavaScript компилатора приема JavaScript код, трансформира го и връща JavaScript код в друг формат. Най-често срещаната употреба е приемането на ES6 синтаксис и преработката му в синтаксис, който по-старите браузъри могат да интерпретират. Babel е компилатора, който се използва най-често съвместно с React.

Bundlers

Bundler-ите взимат JavaScript и CSS код написан като отделни модули (често стотици) и ги събира заедно в по-малко на брой файлове, които са по-добре оптимизирани за браузърите. Някои bundler-и, които са често използвани в React приложения са Webpack и Browserify.

Мениджъри на пакети

Мениджърите на пакети са инструменти, които позволяват на потребителя да управлява зависимостите в едно приложение. npm и Yarn са два такива, които са често използвани при разработката на приложения с React. И двата са клиенти за npm регистъра на пакети.

CDN

CDN е съкращение от Content Delivery Network (Мрежа за доставка на съдържание). CDN-ите предоставят статично съдържание кещирано от мрежа от сървъри по целия свят.

JSX

JSX е разширение на синтаксиса на JavaScript. Наподобява шаблонен език, но има на разположение пълната сила на JavaScript. JSX се компилира до извиквания на React.createElement(), което връща обикновени JavaScript обекти наричани “React елементи”. За основно въведение в JSX прочетете документацията тук, а по-задълбочен урок по JSX можете да намерите тук.

React DOM замества стандарната конвенция при именуването на HTML атрибути, използвайки camelCase. Например, tabindex става tabIndex в JSX. Атрибута class се изписва като className, тъй като class е запазена дума в JavaScript:

const name = 'Clementine';
ReactDOM.render(
  <h1 className="hello">My name is {name}!</h1>,
  document.getElementById('root')
);

Елементи

React елементите са изграждащите блокове на React приложенията. Човек би сгрешил елементите с по-широко разпознаваемата концепция на “компоненти”. Елемента описва какво искате да се визуализира на екрана. React елементите са неизменни.

const element = <h1>Hello, world</h1>;

Обикновено елементите не се използват директно, а биват връщани от компоненти.

Компоненти

Компонентите в React са малки, преизползваеми парчета код, които връщат React елемент за да бъде рендериран на страницата. Най-простата версия на React компонент е обикновена JavaScript функция, която връща React елемент:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Компоненти могат да бъдат и ES6 класове:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Компонентите могат да бъдат разбити на обособени парчета функционалност и използвани в други компоненти. Компоненти могат да връщат други компоненти, масиви, низове и числа. Добро правило е, че ако част от вашият UI се използва на няколко места (Button, Panel, Avatar) или е достатъчно сложна сама по себе си (App, FeedStory, Comment), то тази част е кандидат за преизползваем компонент. Имената на компонентите трябва винаги да започват с главна буква (<Wrapper/> не <wrapper/>). Прочетете тази статия за повече информация относно рендерирането на компоненти.

props

props е вид входяща информация за един React компонент. Те се предават от компонент-родител към компонент-наследник.

Запомнете, че props са само за четене. Те не бива да се модифицират по какъвто и да е начин:

// Грешно!
props.number = 42;

Ако ви се налага да модифицирате дадена стойност в отговор на входяща информация от потребител или мрежови отговор, то използвайте state.

props.children

props.children е на разположение във всеки компонент. Стойността му е съдържанието между отварящите и затварящи тагове на компонент. Например:

<Welcome>Hello world!</Welcome>

Низа Hello world! е наличен като стойност в props.children в компонента Welcome:

function Welcome(props) {
  return <p>{props.children}</p>;
}

За компоненти дефинирани като класове, използвайте this.props.children:

class Welcome extends React.Component {
  render() {
    return <p>{this.props.children}</p>;
  }
}

state

Компонент се нуждае от state когато дадени данни свързани с него се променят във времето. Например, Checkbox компонент може да се нуждае от стойност isChecked в неговото състояние, a компонент NewsFeed може да има нуждата да запазва fetchedPosts в неговото състояние.

Основната разлика между state и props е, че props се предават от компонента-родител, а state се управлява от самият компонент. Компонент не може да променя своите props, но може да променя своето състояние (state). За да го направи, трябва да извика метода this.setState(). Само компоненти дефинирани като класове могат да имат състояние.

За всяка индивидуална част променливи данни трябва да има един компонент, който отговаря за запазването им в собственото им състояние. Не се опитвайте да синхронизирате състоянията на два различни компонента. Вместо това го издигнете до най-близкия общ прародител и го предайте като props на всеки един от тези компоненти.

Lifecycle методи

Lifecycle методите са персонализирана функционалност, която се изпълнява по време на различните фази на компонента. Има методи, които са налични при създаването и добавянето на компонента към DOM (монтиране), когато компонента се актуализира и когато компонента се демонтира или премахне от DOM.

Контролирани и Неконтролирани Компоненти

В React има два различни подхода за работа с input елементи в една форма.

Input елемент, чиято стойност се контролира от React се нарича контролиран компонент. Когато потребителя въведе данни в контролиран компонент, обработчик на събитие бива задействан с въпросните промени и вашият код решава дали входящите данни са валидни (чрез повторно рендериране с променените стойности). Ако вие не рендерирате повторно, то тогава елемента на формата ще остане непроменен.

Неконтролирания компонент работи като стандартен елемент на форма извън React. Когато потребител въведе данни в поле на форма (input, падащо меню и т.н.), променената информация се отразява без да се налага намеса от страна на React. Това обаче означава, че вие не можете да накарате полето да притежава определена стойност.

В повечето случаи се препоръчваизползването на контролирани компоненти.

Ключове

“Ключ” е специален атрибут с тип низ, който трябва да бъде добавен при създаването на масив от елементи. Ключовете помагат на React да разпознава кои елементи са променени, добавени или премахнати. Целта на възлагане на ключове на елементите от масив е получаването на стабилна идентичност на всеки един от тях.

Ключовете е задължително да са уникални само измежду равноправни елементи в конкретния масив. Не е задължително те да са уникални в цялото приложение, или дори в конкретен компонент.

Не подавайте нещо подобно на Math.random() за стойност на ключове. Важно е ключовете да имат “стабилна идентичност” между повторни рендерирания, за да може React да прецени кога елементи биват добавяни, премахвани или пренареждани. В идеалния случай ключовете трябва да съответстват на уникални и стабилни идентификатори идващи от вашите данни, например post.id.

Референции

React поддържа специален атрибут, който може да бъде закачен към всеки компонент. Атрибута ref може да бъде обект създаден от функцията React.createRef(), от callback функция, или от низ (в API от предишни версии). Когато ref атрибута е callback функция, то тя приема като аргумент скрития DOM елемент или класова инстанция (в зависимост от типа на елемента). Това ви дава възможността да имате директен достъп до DOM елемента или инстанцията на компонента.

Използвайте референции умерено. Ако попаднете в ситуация, където често използвате референции за да “се случат нещата” във вашето приложение, обмислете по-задълбочено изучаване на потока от данни отгоре надолу.

Събития

Обработването на събития с React елементи има някои синтактични различия:

  • React обработчиците на събития се именуват чрез camelCase, вместо само с малки букви.
  • В JSX се подава функция за обработчик на събитие вместо низ.

Съпоставка

Когато props или състоянието на компонент бъдат променени, React решава дали актуализация на DOM е необходима като съпоставя току-що върнатия елемент с предварително рендерирания такъв. Когато те не са еднакви, React ще актуализира DOM. Този процес се нарича “съпоставка”.