Дългоочакваният React v18 най-накрая беше пуснат преди няколко месеца. Въпреки че нямаше големи промени, бяха добавени някои интересни функции, които си заслужава да бъдат разгледани. Тази статия ще разгледа някои нови допълнения и как да надстроите до React v18.

Как да надстроите до React 18

За да инсталирате най-новата версия на React, изпълнете тази команда в терминал:

npm Инсталирай реагирам реагирам-dom

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

прежда добавяне реагира реагира-dom

След като инсталирате най-новата версия, можете да започнете да се възползвате от новите й функции.

Има няколко добавки в React 18; ето четири от най-забележителните.

1. Строг режим

StrictMode е функция, която можете да използвате, за да подчертаете потенциални проблеми в приложение. Проверките в строг режим се изпълняват само в режим на разработка и няма да повлияят на производствената компилация. Те обаче могат да бъдат много полезни при идентифициране на потенциални проблеми във вашия код.

Можете да активирате строг режим за всяка част от вашето приложение. Например, можете да го активирате за всички ваши компоненти или само за някои от тях.

instagram viewer 

импортиране Реагирайте от 'реагира';
функцияДемоПример() {
връщане (
<див>
<FirstComponent />
<Реагирайте. Строг режим>
<Втори компонент />
<Трети компонент />
</React.StrictMode>
<Четвърти компонент />
</div>
 );
}

В горния код и четирите компонента ще бъдат проверени за потенциални проблеми. Проверките на строг режим обаче ще се прилагат само за и .

StrictMode помага и по други начини, като например:

  • Идентифициране на компоненти с опасен жизнен цикъл: Ако даден компонент има метод на жизнения цикъл, който е маркиран като опасен, строг режим ще ви предупреди за това.
  • Предупреждение относно използването на API за наследени низове: Ако използвате наследения API за низ, стриктният режим ще ви предупреди за неговото използване.
  • Предупреждение за остарялото използване на findDOMNode: Ако използвате остарелия API на findDOMNode, строгият режим ще ви предупреди за това.
  • Откриване на неочаквани странични ефекти: Ако даден компонент задейства странични ефекти (като setState) на неочаквани места, строгият режим ще ви предупреди за това.
  • API за откриване на наследен контекст: Ако използвате наследения контекстен API (който вече е отхвърлен), строгият режим ще ви предупреди за това.
  • Осигуряване на състояние за многократна употреба: Ако имате състояние, което се използва от множество компоненти, строгият режим ще ви помогне да гарантирате, че е правилно синхронизиран.

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

2. Преходи

Преходите ви позволяват да маркирате определени актуализации на потребителския интерфейс като неспешни. Това означава, че React може да приоритизира други актуализации, които са по-важни.

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

Можете да използвате функцията startTransition, за да маркирате актуализация на потребителския интерфейс като преход. Ето един пример:

импортиране { startTransition } от 'реагира';
startTransition(() => {
// Маркирайте всички неспешни актуализации на състоянието вътре като преходи
});

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

3. Автоматично пакетиране

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

Преди, ако имахте обещание или правехте мрежово повикване, актуализациите на състоянието нямаше да бъдат групирани и React трябваше да рендира многократно. Въпреки това, с автоматично групиране в React 18, всички актуализации на състоянието се пакетират, дори в рамките на обещания, setTimeouts и обратни извиквания на събития. Това значително намалява работата, която React трябва да върши във фонов режим.

Можете да групирате актуализации на състоянието ръчно, като използвате функцията flushSync, но от React 18 този процес вече е автоматичен. Това води до много по-добра производителност, тъй като React ще изчака микро-задачата да приключи, преди да рендира повторно.

4. Нови куки

Версия 18 въвежда много нови Реагирайте куките, включително useId, useTransition и useDeferredValue. Тези нови кукички осигуряват чудесен начин за добавяне на допълнителна функционалност към вашите React приложения с минимални усилия.

React 18 осигурява повишена производителност на приложението

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