Мислите ли да опитате кодиране с React? Ето ключови ключови нови функции, които да опитате в React 18.

React е много популярна JavaScript библиотека с отворен код, създадена от Facebook през 2013 г. Благодарение на неговата гъвкавост, много разработчици използват някои от неговите функции за изграждане на бързи, ефективни и многократно използваеми компоненти на потребителския интерфейс (UI).

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

Новите функции в React 18

React 18 се състои от някои полезни нови функции, добавени към JavaScript библиотека с отворен код. Много от тези промени не бяха в предишната версия, докато други функции бяха подобрени. Някои от тези функции включват; нов root API, Automatic Batching, Transition API, Suspense API и пускането на нови Hooks.

Нов root API

Основният API в React следи как компонентът от най-високо ниво се изобразява в дървото. В предишните версии на React,

instagram viewer
изобразявам методът е използван за изпълнение на изобразяване, което сега се нарича наследен root API.

React 18 обаче идва с нов root API, който създава root с помощта на createRoot метод и след това изобразява компонент на React към създадения корен с помощта на изобразявам метод.

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

Фрагментът по-долу показва как основният API е структуриран както по стария, така и по нов начин.

Наследен коренен API

импортиране ReactDOM от'react-dom';
импортиране Приложение от„./Приложение“;
ReactDOM.render(<Приложение />, документ.getElementById("приложение"))

Нов root API

импортиране ReactDOM от'react-dom/клиент';
импортиране Приложение от„./Приложение“;
конст корен = ReactDOM.createRoot(документ.getElementById("приложение"));
root.render(<Приложение />)

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

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

С React 18 пакетните актуализации на състоянието се извършват автоматично, независимо къде се случват тези актуализации. Тази функция осигурява предварително подобрение на производителността и времето за изобразяване. Ако обаче имате състояние на компонент, което не искате да бъде групирано, можете да се откажете от него, като използвате flushSync метод. По-долу е примерен фрагмент за това как може да се направи;

импортиране { flushSync } от'react-dom';
функцияhandleClick() {
 flushSync(() => {
 setCount(броя => брои + 1);
]});
 flushSync(() => {
 setStore(магазин => !магазин);
});
}

API за преход

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

Сега, ако такива актуализации се появят едновременно, това може да се нарече тежка операция и може да доведе до замразяване на вашето приложение. За да реши този проблем, това е мястото, където преходният API извика startTransition идва да играе. Тази нова функция казва на React кои актуализации трябва да бъдат маркирани като „преходи“, като на свой ред подобрява взаимодействието на потребителите. Ето примерен код за това как работи;

импортиране { startTransition } от"реагира";
startTransition(() => {
 setSearch (вход);
});

Съспенс

Когато дадено приложение се визуализира на сървъра, статичен HTML файл се връща към браузъра, което позволява на потребителя да види как изглежда приложението, докато JavaScript се зарежда. Когато файлът се зареди, HTML става динамичен с това, което е известно като хидратация. Недостатъкът тук е, че ако всичко това не е налице, вашето приложение няма да стане интерактивно.

За да разреши този проблем, React 18 предоставя две нови функции за изобразяване от страна на сървъра (SSR), използвайки Съспенс компонент;

  • Поточно предаване на HTML позволява части от компонент да бъдат изпращани, докато се визуализират.
  • Селективната хидратация дава приоритет на интерактивността на компонентите, избрани от потребителя.

Нови куки

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

  • useId: Тази кука ни позволява да създадем уникален идентификатор (ID) в нашето приложение както на сървъра, така и на клиента.
  • useTransition: Използва се заедно с startTransition за създаване на нова актуализация на състоянието, която може да се нарече неспешна.
  • useDefferedValue: Позволява отлагане на актуализации, които са по-малко спешни.
  • useSyncExternalStore: Тази кука е полезна при внедряване на абонаменти за външни източници на данни.
  • useInsertionEffect: Тази кука е ограничена до автори на библиотека CSS-in-JS за инжектиране на стилове в DOM.

Как да актуализирате, за да React 18

За да извършите актуализация, можете да използвате npm или yarn мениджъра на пакети, като изпълните следната команда в терминала.

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

или

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

След това ще трябва да направите промяна в index.js файл в главната директория на папката на проекта от наследения API към новия основен API, както е показано по-рано.

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

За да настроите нов проект React 18, пакетът create-react-app се инсталира с npm или yarn в терминала;

npx създавам-react-app my-react-app

или

добавете прежда създавам-react-app my-react-app

Подобрете производителността на приложението си с React 18

Вече знаете за някои нови функции в React 18, като новия root API, Suspense, Transition или Automatic Batching, и как да надстроите до тази нова версия и да я настроите от нулата.

Тези скорошни промени в React са готови да изпитате точно сега.