Размишљате о покушају кодирања помоћу Реацт-а? Ево кључних нових функција које можете испробати у Реацт 18.

Реацт је веома популарна ЈаваСцрипт библиотека отвореног кода коју је креирао Фацебоок 2013. године. Захваљујући његовој флексибилности, многи програмери користе неке од његових карактеристика у изградњи брзих, ефикасних компоненти корисничког интерфејса (УИ) за вишекратну употребу.

У марту 2022, тим је лансирао најновију и очекивану верзију Реацт библиотеке, Реацт 18, која укључује нове функције које се фокусирају на побољшање перформанси апликације.

Нове функције у Реацт 18

Реацт 18 се састоји од неких корисних нових функција додатих ЈаваСцрипт библиотека отвореног кода. Многе од ових промена нису биле у претходној верзији, док су друге функције побољшане. Неке од ових карактеристика укључују; нови основни АПИ, аутоматско батцхинг, прелазни АПИ, суспендовани АПИ и издавање нових кукица.

Нови Роот АПИ

Основни АПИ у Реацт-у прати како се компонента највишег нивоа приказује у стаблу. У претходним верзијама Реацт-а,

дати, пружити метода је коришћена за извршавање рендеровања које се сада назива застарели роот АПИ.

Међутим, Реацт 18 долази са новим роот АПИ-јем који креира роот користећи цреатеРоот метода, а затим рендерује Реацт компоненту у креирани корен користећи дати, пружити методом.

Овај нови роот АПИ ће вам омогућити приступ функцијама у овој недавној верзији, као што је функција прелазног АПИ-ја о којој ћемо касније разговарати. Иако ће стари начин и даље функционисати у Реацт-у 18, можда ће бити уклоњен у будућности.

Исечак испод показује како је основни АПИ структуриран и на застарели и на нове начине.

Легаци Роот АПИ

увоз РеацтДОМ из'реацт-дом';
увоз Апликација из'./Апликација';
РеацтДОМ.рендер(<Апликација />, документ.гетЕлементБиИд('апликација'))

Нови Роот АПИ

увоз РеацтДОМ из'реацт-дом/цлиент';
увоз Апликација из'./Апликација';
конст роот = РеацтДОМ.цреатеРоот(документ.гетЕлементБиИд('апликација'));
роот.рендер(<Апликација />)

Аутоматско дозирање

Батцхинг у Реацт-у укључује вишеструка ажурирања стања у једном поновном приказивању на сваком догађају прегледача, на пример а клик догађај. Све промене стања које су се десиле ван догађаја као што је обећање или повратни позив неће бити груписане.

Са Реацт 18, пакетна ажурирања стања се обављају аутоматски без обзира на то где се та ажурирања дешавају. Ова функција обезбеђује изванредно побољшање перформанси и времена рендеровања. Међутим, ако имате стање компоненте за коју не желите да се групише, можете је одустати користећи флусхСинц методом. Испод је пример исечка о томе како се то може урадити;

увоз { флусхСинц } из'реацт-дом';
функцијахандлеЦлицк() {
 флусхСинц(() => {
 сетЦоунт(цоунт => цоунт + 1);
]});
 флусхСинц(() => {
 сетСторе(продавница => !продавница);
});
}

Транзициони АПИ

У Реацт-у, ажурирања направљена у корисничком интерфејсу могу се категорисати као хитна, а прелазна ажурирања се такође називају нехитна. Пример хитног ажурирања може бити случај уноса текста у поље, док ажурирање прелаза може бити функција филтрирања претраге.

Сада, ако се таква ажурирања догоде истовремено, то би се могло назвати тешком операцијом и могло би довести до замрзавања ваше апликације. Да би се решио овај проблем, овде је прелазни АПИ позвао стартТранситион долази да се игра. Ова нова функција говори Реацт-у која ажурирања треба да буду означена као „прелази“ чиме се побољшава интеракција корисника. Ево примера кода како то функционише;

увоз { стартТранситион } из"реаговати";
стартТранситион(() => {
 сетСеарцх (унос);
});

Неизвесност

Када се апликација прикаже на серверу, статична ХТМЛ датотека се враћа у прегледач омогућавајући кориснику да види како апликација изгледа док се ЈаваСцрипт учитава. Када се датотека учита, ХТМЛ постаје динамичан са оним што је познато као хидратација. Недостатак је у томе што ако све ово није на месту, ваша апликација не би постала интерактивна.

Да би решио овај проблем, Реацт 18 обезбеђује две нове функције рендеровања на страни сервера (ССР) користећи Неизвесност саставни део;

  • Стримовање ХТМЛ-а омогућава да се делови компоненте шаљу док се рендерују.
  • Селективна хидратација даје приоритет интерактивности компоненти које одабере корисник.

Нев Хоокс

Једна велика прекретница за Реацт било је увођење куке у Реацт-у верзија 16 која омогућава компонентама функција да приступе стањима и другим Реацт функцијама без писања класа. Реацт 18 се испоручује са пет нових кукица за побољшање искуства програмера;

  • усеИд: Ова кука нам омогућава да креирамо јединствени идентификатор (ИД) у нашој апликацији и на серверу и на клијенту.
  • усеТранситион: Користи се поред стартТранситион да креирате ново ажурирање стања које се може назвати нехитним.
  • усеДеффередВалуе: Омогућава одлагање ажурирања која су мање хитна.
  • усеСинцЕктерналСторе: Ова кука је корисна када се примењује претплата на спољне изворе података.
  • усеИнсертионЕффецт: Ова кука је ограничена на ауторе ЦСС-ин-ЈС библиотеке за убацивање стилова у ДОМ.

Како се ажурирати на Реацт 18

Да бисте извршили ажурирање, нпм или иарн менаџер пакета се може користити покретањем следеће команде у терминалу.

нпм инсталирај реаговати реаговати-дом

или

иарн адд реацт реацт-дом

Затим ћете морати да промените индек.јс датотеку у основном директоријуму фасцикле пројекта од застарелог АПИ-ја до новог коренског АПИ-ја као што је раније приказано.

Како поставити нови Реацт 18 пројекат

Да бисте подесили нови Реацт 18 пројекат, пакет цреате-реацт-апп се инсталира са нпм или иарн у терминалу;

нпк Креирај-реаговати-апликација моја-реаговати-апликација

или

предиво додати Креирај-реаговати-апликација моја-реаговати-апликација

Побољшајте перформансе апликације уз Реацт 18

Сада знате за неке нове функције у Реацт 18 као што су нови роот АПИ, суспензија, прелаз или аутоматско батцхинг, и како да надоградите на ову нову верзију и подесите је од нуле.

Ове недавне промене у Реацт-у су спремне да их искусите управо сада.