Научите како да користите Реацт 18 куке

У марту 2022, Реацт тим је најавио званично издање Реацт 18. Ово издање је стигло са мноштвом нових функција усмерених на побољшање перформанси, на основу концепта „истовременог приказивања“. Идеја која стоји иза истовременог рендеровања је да се процес рендеровања у ДОМ учини прекинутим.

Међу новим функцијама је пет кукица: усеИд, усеТранситион, усеДерредВалуе, усеСинцЕктерналСторе и усеИнсертионЕффецт.

Реагирајте користећи Транситион Хоок

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

Компонента СеарцхПаге

Овај једноставан програм имитира претраживач који ажурира два стања — поље за унос и неке резултате претраге.

увоз { усеСтате } из "реаговати";
функцијаСеарцхПаге() {
 цонст [инпут, сетИнпут] = усеСтате(





instagram viewer

"")
конст [листа, сетЛист] = усеСтате([]);
конст листСизе = 30000
функцијахандлеЦханге(е) {
сетИнпут(е.таргет.вредност);
конст листИтемс = [];
за (дозволити и = 0; и < листСизе; и++){
листИтемс.пусх(е.таргет.вредност);
 }
сетЛист (листИтемс);
 }
повратак (
<див>
<етикета>Тражити на интернету: </label>
<тип уноса="текст" валуе={инпут} онЦханге={хандлеЦханге} />
{листа.мап((ставка, индекс) => {
 повратак <див кључ={индек}>{итем}</div>
 })}
</div>
 );
}
извозУобичајено СеарцхПаге;

Ажурирана компонента апликације

увоз СеарцхПаге из "./Цомпонентс/СеарцхПаге";
функцијаАпликација() {
повратак (
<див>
< СеарцхПаге/>
</div>
 );
}
извозУобичајено Апликација;

Горњи код приказује Реацт апликацију са пољем за унос:

Када почнете да уносите знакове у поље, испод ће се појавити 30.000 копија откуцаног текста:

Ако брзо унесете неколико знакова, требало би да уочите кашњење. Утиче на време које је потребно знаковима да се појаве и у пољу за унос и у „области резултата претраге“. То је зато што Реацт истовремено покреће оба ажурирања стања.

Ако демо ради преспоро или пребрзо за вас, покушајте да подесите листСизе вредност сходно томе.

Уметање куке усеТранситион у апликацију омогућиће вам да дате приоритет једном ажурирању стања над другим.

Коришћење куке усеТранситион

увоз {усеСтате, усеТранситион} из "реаговати";
функцијаСеарцхПаге() {
конст [исПендинг, стартТранситион] = усеТранситион();
 цонст [инпут, сетИнпут] = усеСтате("")
конст [листа, сетЛист] = усеСтате([]);
конст листСизе = 30000
функцијахандлеЦханге(е) {
сетИнпут(е.таргет.вредност);
 стартТранситион(() => {
конст листИтемс = [];
за (дозволити и = 0; и < листСизе; и++){
листИтемс.пусх(е.таргет.вредност);
 }
сетЛист (листИтемс);
 });
 }
повратак (
<див>
<етикета>Тражити на интернету: </label>
<тип уноса="текст" валуе={инпут} онЦханге={хандлеЦханге} />
{је у току? "...Учитавање резултата": лист.мап((ставка, индекс) => {
 повратак <див кључ={индек}>{итем}</div>
 })}
</div>
 );
}
извозУобичајено СеарцхПаге;

Ажурирање вашег СеарцхПаге компонента са кодом изнад ће дати приоритет пољу за унос у односу на „област резултата претраге“. Ова једноставна промена има јасан ефекат: требало би да одмах почнете да видите текст који унесете у поље за унос. Само ће „област резултата претраге“ и даље имати мало кашњење. Ово је због стартТранситионинтерфејс за програмирање апликација (АПИ) са куке усеТранситион.

Код који приказује резултате претраге у корисничком интерфејсу сада користи стартТранситион АПИ. Ово омогућава пољу за унос да прекине ажурирање стања резултата претраге. Када је у току() функција приказује “...Резултат учитавања” то указује да се дешава прелаз (из једног стања у друго).

Реагујте усеДеферредВалуе Хоок

УсеДеферредВалуе кука вам омогућава да одложите поновно приказивање ажурирања стања без подстрека. Као и усеТранситион кука, усеДеферредВалуе кука је закачива за паралелност. УсеДеферредВалуе кука омогућава стању да задржи своју првобитну вредност док је у транзицији.

Компонента СеарцхПаге са кукицом усеДеферредВалуе().

увоз { усеСтате, усеТранситион, усеДеферредВалуе } из "реаговати";
функцијаСеарцхПаге() {
конст [,стартТранситион] = усеТранситион();
 цонст [инпут, сетИнпут] = усеСтате("")
конст [листа, сетЛист] = усеСтате([]);
конст листСизе = 30000
функцијахандлеЦханге(е) {
сетИнпут(е.таргет.вредност);
 стартТранситион(() => {
конст листИтемс = [];
за (дозволити и = 0; и < листСизе; и++){
листИтемс.пусх(е.таргет.вредност);
 }
сетЛист (листИтемс);
 });
 }
конст деферредВалуе = усеДеферредВалуе (улаз);
повратак (
<див>
<етикета>Тражити на интернету: </label>
<тип уноса="текст" валуе={инпут} онЦханге={хандлеЦханге} />
{листа.мап((ставка, индекс) => {
 повратак <див кључ={индек} инпут={деферредВалуе} >{итем}</div>
 })}
</div>
 );
}
извозУобичајено СеарцхПаге;

У коду изнад видећете да је је у току() функција више не постоји. Ово је зато што деферредВалуе променљива из кукице усеДеферредВалуе замењује је у току() функција током транзиције стања. Уместо да се листа резултата претраге освежава када унесете нови знак, она ће задржати своје старе вредности док апликација не ажурира стање.

Реагујте усеСинцЕктерналСторе Хоок

За разлику од кукица усеТранситион и усеДеферредВалуе које раде са кодом апликације, усеСинцЕктерналСторе ради са библиотекама. Омогућава вашој Реацт апликацији да се претплати и чита податке из спољних библиотека. УсеСинцЕктерналСторе кука користи следећу декларацију:

конст стате = усеСинцЕктерналСторе (претплати се, гетСнапсхот[, гетСерверСнапсхот]);

Овај потпис садржи следеће:

• стање: вредност складишта података коју враћа кукица усеСинцЕктерналСторе.
• претплатити се: региструје повратни позив када се промени складиште података.
• гетСнапсхот: враћа тренутну вредност складишта података.
• гетСерверСнапсхот: враћа снимак који се користи током приказивања сервера.

Са усеСинцЕктерналСторе, можете се претплатити на читаво складиште података или одређено поље у складишту података.

Реагирајте усеИнсертионЕффецт Хоок

УсеИнсертионЕффецт кука је још једна нова Реацт кука која ради са библиотекама. Међутим, уместо складишта података, усеИнсертионЕффецт кука ради са ЦСС-ин-ЈС библиотекама. Ова кука се бави проблемима перформанси рендеровања стила. Он стилизује ДОМ пре читања распореда у куки усеЛаиоутЕффецт.

Реагујте усеИд Хоок

Користите усеИд куку у ситуацијама које захтевају јединствене ИД-ове (осим кључева на листи). Његова главна сврха је да генерише ИД-ове који остају јединствени за клијента и сервера, избегавајући грешку неусклађености хидратације Реацт сервера. УсеИд кука користи следећу декларацију:

конст ид = усеИд()

У декларацији ид је јединствени низ који укључује : токен. Након декларације, можете положити ид променљива директно на елемент(е) којима је то потребно.

Коју вредност ове нове куке додају реакцији?

Закачице усеТранситион и усеДеферредВалуе су закачице кода апликације. Кроз истовремено приказивање, они побољшавају перформансе апликација. УсеИд кука се бави грешком неусклађености хидратације креирањем јединствених ИД-ова на клијенту и серверу.

Закачице усеСинцЕктерналСторе и усеИнсертионЕффецт раде са спољним библиотекама да би олакшале истовремено приказивање. УсеИнсертионЕффецт кука ради са ЦСС-ин-ЈС библиотекама. УсеСинцЕктерналСторе кука ради са библиотекама складишта података као што је Редук продавница.

Заједно, ове куке дају велики подстицај перформансама, што заузврат побољшава корисничко искуство.