Как React работи под капака

React е много популярна JavaScript библиотека. С над 5,5 милиона изтегляния седмично, React се радва на голяма популярност. Но не много разработчици на React знаят как React работи под капака.

В тази публикация ще се опитам да разкрия някои интересни неща за React, които вие като разработчик на React може да намерите за очарователни. Да започнем в началото.

Но преди да започнем, ако сте разработчик на React, имам няколко вълнуващи новини за вас! След като завършите тази статия, ще можете да разработите нещо страхотно с React и да спечелите награди по пътя :)

Какво прави React?

В основата си React поддържа дърво за вас. Това дърво е в състояние да прави ефективни диф изчисления на възлите.

Представете си HTML кода като дърво. Всъщност точно така браузърът се отнася към вашия DOM (вашия визуализиран HTML в браузъра). React ви позволява ефективно да преконструирате вашия DOM в JavaScript и да прокарате само тези промени в DOM, които действително са настъпили.

JSX е синтактична захар

Няма нищо подобно на JSX - нито за JavaScript, нито за браузъра. JSX е просто синтактична захар за създаване на много специфични JavaScript обекти.

Когато пишете нещо като:

const tag = 

Hello

това, което по същество правите е следното:

const tag = React.createElement("h1", {}, "Hello")

Виждате ли, когато започнете да пишете вложени неща, това не само е трудно за кодиране, но също така става много неудобно да се поддържа такава кодова база. По този начин JSX ви помага да постигнете чистотата на HTML до мощта на JavaScript.

Но какво прави React.createElement? Той създава обикновен стар обект на JavaScript. Всъщност можете ръчно да го извикате и да се уверите сами!

Виждате ли, имаме обект като този:

{ $$typeof: Symbol(react.element), key: null, props: {children: "Hello"}, ref: null, type: "div" }

И ако започнем да влагаме елементи по този начин:

React.createElement('div', { }, React.createElement('p', {}, 'A p inside a div') ) 

Ще започнем да получаваме вложени обекти:

Така че сега знаете, след като всички JSX са анализирани и всички обаждания на React.createElement са решени, ние се приземяваме с един гигантски вложен обект, както по-горе.

React Renderer

Сега, ако се върнете към точката, от която стартираме нашето приложение, ще видите, че във вашия файл index.js ще намерите следния ред:

// .. prev code ReactDOM.render(, container)

От горе, ние знаем, че когато приключи разбора, това е просто огромен обект на React елементи. Тогава как React може да конструира действителни div и p тагове от него? Запознайте се с ReactDOM.

ReactDOM от своя страна рекурсивно създава възли в зависимост от тяхното свойство 'type' и ги добавя накрая към DOM.

На този етап трябва да стане ясно, че защо отделянето на React от рендерите всъщност е чудесен ход! Това, което React прави, е просто да конструира дърво от потребителски интерфейс, което да може да се използва не само в мрежата, но и в среди като мобилни, като се има предвид, че е наличен визуализатор, който може да комуникира с хост ОС. Тук идва React Native да играе. Виждате ли, React Native използва библиотеката React, но не ReactDOM като визуализация. Вместо това самият пакет за реагиране е роден.

Правим това в реактивно приложение, за да стартираме приложението:

const { AppRegistry } = require('react-native') AppRegistry.registerComponent('app', () => MainComponent)

Виж! Няма ReactDOM. Защо не? Тъй като нямаме методи като appendChild, нито имаме среда, подобна на DOM. Вместо това за мобилни устройства се нуждаем от поддръжка за потребителски интерфейс директно от ОС. Но библиотеката на React не трябва да знае това, визуализаторът (React Native) се грижи за това.

Реагирайте помирение

Когато казваме, че React поддържа копие на DOM, използвайки виртуален DOM в JavaScript, и го използва, за да го различава към всякакви промени и да го прилага към истински DOM, ние не искаме React да си налага груба сила. Реагирайте, всъщност прави много мързеливо помирение. React би направил възможно най-малко промени, т.е. ще се опита да използва повторно елементи, атрибути и дори стилове, ако е възможно!

Помислете за този пример:

stuff

Да предположим, че промените този JSX израз на по-долу, като използвате някакво условие или някакво състояние:

something else

Сега, докато се различава, React ще види това добре, тагът img използва същия класName както в стари, така и в нови дървета, така че защо да го модифицирате. И просто ще модифицира вашия атрибут alt и ще продължи.

Има обаче уловка. Тъй като не искаме React да прави много изчисления на различна част, React би предположил, че ако родителят се е променил, съдържащото го поддърво определено се е променило. Например:

I did not change

Ако промените този JSX на по-долу, използвайки условие / състояние:

I did not change

Въпреки че можете да видите, че не е необходимо да създаваме отново вътрешния р-маркер, но React няма начин да разбере, че докато обхождате дървото отгоре (освен ако, разбира се, не изпълнявате различни дървета, които са много по-скъпи алгоритми евристичната O (n) реакция следва за различаващи се). И така, React решава да унищожи всички деца (т.е. да извика техните функции за почистване в useEffect или componentWillUnmount в базирани на класа компоненти) и да пресъздаде децата от нулата.

Ключове за реакция

Когато добавя / премахва елементи в възел, React просто ще се завърти над децата в старото дърво и децата в новото дърво на възела и ще маркира местата, където трябва да извърши всяко добавяне / премахване. Но това има недостатък без допълнителна помощ от разработчика. Помислете за този пример:

  • A
  • B

Помислете, че това е променено по-долу по условие / състояние:

  • Z
  • A
  • B

Сега, когато React започне да сравнява двата списъка за разлика, ще открие разликата в детски възел 1, ще мутира старото A на ново Z, след това отново в детски възел 2, ще го измени от старото B на ново A и след това накрая добавете новия B възел.

По-добър начин обаче би бил да се запазят съществуващите A и B възли и просто да се добави Z възела. Но как React би могъл да знае за това? Бутоните за реакция биха помогнали.

Клавишите просто осигуряват добър начин за реагиране, за да разберете кои елементи са се променили или не са се променили, докато се различават. Сега, вместо да сравнява целия елемент, React ще сравнява ключовете на децата, за да види кой елемент трябва да бъде добавен / премахнат. По-долу е ефективен начин за извършване на едно и също нещо:

  • A
  • B

Сега, ако това се промени на:

  • Z
  • A
  • B

React вече ще знае, че ключовете „A“ и „B“ вече съществуват, така че просто трябва да добавим новия елемент с ключ „Z“.

Вие сте разработчик на React? Покажете уменията си на React, като разработите 3-минутна интерактивна игра в React и спечелете качулки, ризи и чаши за кафе ! Участвайте в codecomp като се присъедини към раздор сървъра codedamn е тук

Така че това бяха някои важни концепции, които вярвам, че би било наистина полезно за вас като разработчици на React да започнете да разбирате ядрото на React и как всъщност работи. Чувствайте се свободни да предавате всички предложения или въпроси, които имате за същото.

Можете да ме последвате в Twitter за още JS / кодиране на туитове и други неща. Мир!