Twórcy React, Dan Abramov i Rachel Nabors, opublikowali pierwszą wersję kandydata do wydania React 17.0 RC. Mimo tego, że ostatnia wersja wyszła ponad dwa lata temu, to najnowszy kandydat do wydania nie dodaje żadnych nowych funkcji. Jednak React 17 zawiera kilka istotnych zmian, szczególnie przy ułatwieniu aktualizacji Reacta.

Nowe funkcje są zaplanowane na kolejne wydania. Twórcy nazwali siedemnastkę „odskocznią, która pozwoli bezpieczniej osadzić drzewo zarządzane przez jedną wersję Reacta wewnątrz drzewa, którym zarządza inna wersja.”

„Wszystko albo nic”

Każda z aktualizacji wprowadzonych w ciągu ostatnich siedmiu lat była oddzielnym elementem. Programiści mieli do wyboru pozostać przy starej wersji lub zaktualizować całą aplikację do nowego wydania. Nie było możliwości łączenia wersji w obrębie aplikacji. Niektórych zmian interfejsu API nie można wykonać w sposób zautomatyzowany. Nadal są one obsługiwane w React, jednak niewielka ilość aplikacji z nich teraz korzysta. Przy aktualizacji trzeba wspierać starsze wersje API lub pozostawiać aplikacje w starszej wersji React. Każda z tych opcji nie pozwala na rozwój aplikacji.

Stopniowe aktualizacje

Nowy React 17.0 RC pozwala na stopniowe aktualizacje. Jest to duże usprawnienie, w przypadku gdy baza kodu powstała kilka lat temu. Do tej wersji utrzymanie dwóch wersji React na stronie powodowało problemy, a sama strona nie była zbyt stabilna.

Każda kolejna aktualizacja React będzie dawała możliwość uaktualniania całej aplikacji naraz jak wcześniej lub „kawałek po kawałku”. Przykładowo, programista będzie mógł przenieść większą część swojej aplikacji do React 18, ale zachować lazy-loading czy podtrasę z React 17.

Wprowadzona opcja ma wpływ w przypadku większych aplikacji, nieutrzymywanych aktywnie. Jednak zaleca się dalsze całkowite aktualizowanie wersji.

Zmiany w delegowaniu wydarzeń

Technicznie zagnieżdżanie aplikacji opracowanych w różnych wersjach React zawsze było możliwe. Jednak ze względu na sposób działania systemu zdarzeń React nie zawsze się to udawało.

Zwykle w komponentach React wbudowane programy obsługi zdarzeń są pisane następująco:

<button onClick={handleClick}>

Odpowiednik Vanilla DOM dla powyższej linii to:

myButton.addEventListener('click', handleClick);

W przypadku większości zdarzeń React nie dołącza ich do węzłów DOM, na których są deklarowane. Jest to delegowanie zdarzeń – dołączanie jednej procedury obsługi na typ zdarzenia bezpośrednio w węźle document.

Jednak w przypadku stopniowych aktualizacji pojawia się problem. Mając wiele wersji React na stronie, każdy rejestruje obsługę zdarzeń u góry. Przez to pokazują się błędy:

e.stopPropagation(): if a nested tree has stopped propagation of an event, 
the outer tree would still receive it

– jeśli zagnieżdżone drzewo przestało propagować zdarzenie, zewnętrzne drzewo nadal będzie je otrzymywało.

W związku z tym twórcy React 17.0 RC zmienili sposób dołączania zdarzenia do DOM. React nie będzie dołączał obsługi zdarzeń na poziomie document. Dołączy je do głównego kontenera DOM, w którym renderowane jest drzewo React:

const rootNode = document.getElementById('root');
ReactDOM.render(<App />, rootNode);

Wprowadzana zmiana pozwala także na zagnieżdżanie React także w innych technologiach, np. jQuery.

Inne przełomowe zmiany w React 17.0 RC

Zmiany w React 17 nie są duże. Nie usunięto żadnej z wycofanych wcześniej metod. W sumie dostosowano mniej niż 20 z ponad 100 000 komponentów.

Usuwanie prywatnych eksportów

Jedną z ważnych zmian jest także usunięcie niektórych wewnętrznych elementów React. Przykładowo React Native for Web był zależny od niektórych elementów wewnętrznych systemu zdarzeń. Prywatny eksport został usunięty w React 17, a React Native for Web był jedynym projektem, który z nich korzystał.

Instalacja React 17.0 RC

Kandydat do wydania jest podatny na błędy, więc nie należy go wprowadzać jeszcze na produkcji.

Instalacja React 17 RC z npm:

npm install react@17.0.0-rc.0 react-dom@17.0.0-rc.0

Instalacja React 17 RC z Yarn:

yarn add react@17.0.0-rc.0 react-dom@17.0.0-rc.0

Więcej o zmianach w nowym kandydacie do wydania React na oficjalnym blogu React.