Дуго очекивани Реацт в18 коначно је објављен пре неколико месеци. Иако није било већих промена, додане су неке занимљиве карактеристике које вреди погледати. Овај чланак ће говорити о неким новим додацима и начину надоградње на Реацт в18.

Како надоградити на Реацт 18

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

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

Или ако користите предиво:

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

Када инсталирате најновију верзију, можете почети да користите предности њених нових функција.

Постоји неколико додатака у Реацт 18; ево четири најистакнутија.

1. Стрицт Моде

СтрицтМоде је функција коју можете користити да истакнете потенцијалне проблеме у апликацији. Строге провере режима се покрећу само у развојном режиму и неће утицати на производну верзију. Међутим, они могу бити веома корисни у идентификацији потенцијалних проблема у вашем коду.

Можете да омогућите строги режим за било који део ваше апликације. На пример, можете га омогућити за све своје компоненте или само за неке од њих.

instagram viewer 
увоз Реаговати из 'реаговати';
функцијаДемоЕкампле() {
повратак (
<див>
<ФирстЦомпонент />
<Реаговати. СтрицтМоде>
<СецондЦомпонент />
<ТхирдЦомпонент />
</React.StrictMode>
<Четврта компонента />
</div>
 );
}

У горњем коду, све четири компоненте би биле проверене на потенцијалне проблеме. Међутим, строге провере режима ће се примењивати само на и .

СтрицтМоде такође помаже на друге начине, као што су:

  • Идентификовање компоненти са небезбедним животним циклусом: Ако компонента има методу животног циклуса која је означена као небезбедна, строги режим ће вас упозорити на то.
  • Упозорење о коришћењу АПИ-ја за старе стрингове реф: Ако користите застарели стринг реф АПИ, строги режим ће вас упозорити на његову употребу.
  • Упозорење о застарелом коришћењу финдДОМНоде: Ако користите застарели финдДОМНоде АПИ, строги режим ће вас упозорити на то.
  • Откривање неочекиваних нежељених ефеката: Ако компонента покреће нежељене ефекте (као што је сетСтате) на неочекиваним местима, строги режим ће вас упозорити на то.
  • Откривање застарелог контекстног АПИ-ја: Ако користите застарели контекст АПИ (који је сада застарео), строги режим ће вас упозорити на то.
  • Обезбеђивање стања за вишекратну употребу: Ако имате стање које користи више компоненти, строги режим ће помоћи да се осигура да је правилно синхронизовано.

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

2. Транситионс

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

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

Можете користити функцију стартТранситион да означите ажурирање корисничког интерфејса као прелаз. Ево примера:

увоз { стартТранситион } из 'реаговати';
стартТранситион(() => {
// Означи сва ажурирања стања која нису хитна унутра као прелазе
});

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

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

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

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

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

4. Нев Хоокс

Верзија 18 уводи много нових Реаговати куке, укључујући усеИд, усеТранситион и усеДеферредВалуе. Ове нове куке пружају одличан начин да додате додатну функционалност вашим Реацт апликацијама уз минималан напор.

Реацт 18 пружа повећане перформансе апликације

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