React 16: co nowego?

Wprowadzenie rozbudowanych zmian zajęło lata. Biblioteka React 16 - znanego też jako Fiber - została w dużej mierze przepisana od nowa, jednak w nowej architekturze zachowano niezmienione API i kompatybilność wsteczną. Przedstawię krótko najważniejsze zmiany.
Aktualizacja
Śmiało możemy zaktualizować swoją aplikację - z wyjątkiem tych w TypeScripcie albo dużych, z wieloma różnymi bibliotekami. W takim wypadku musimy sprawdzić kompatybilność i zaktualizować wszystkie repozytoria.
Zmiana licencji
Przejście na licencję MIT to nowość, która cieszy wiele osób - poprzednia budziła wiele wątpliwości. Teraz firmy mogą korzystać z React bez obaw.
Nowe typy, które zwraca render
Dzięki nowej funkcjonalności z metody render
możemy zwrócić string lub tablicę elementów.
render() {
// No need to wrap list items in an extra element!
return [
// Don't forget the keys :)
<li key="A">First item</li>,
<li key="B">Second item</li>,
<li key="C">Third item</li>,
];
}
Musimy dodać do każdego elementu atrybut key
- w przeciwnym razie pojawi się ostrzeżenie o jego braku. W nowszej wersji 16.2 nie jest to wymagane przy zwracaniu fragmentów.
Zobacz, co może zwrócić metoda render.
Fragmenty (16.2)
Fragmenty są pierwszorzędnymi komponentami i można je stosować zamiast tablic wspomnianych powyżej. Wyglądają jak puste znaczniki JSX i pozwalają na grupowanie listy elementów podrzędnych, bez dodawania dodatkowych węzłów DOM.
render() {
return (
<>
Some text.
<h2>A heading</h2>
More text.
<h2>Another heading</h2>
Even more text.
</>
);
}
Jeśli chcemy atrybutu key
we fragmencie musimy użyć pełnego:
<Fragment></Fragment>
zamiast pustych < >
.
Więcej informacji o fragmentach
Lepsza obsługa błędów
Gdy wystąpi błąd, nie musimy już każdorazowo odmontowywać aplikacji - teraz korzystamy z ograniczania zasięgu błędów (error boundaries). Dotychczas błędy w Javascript w obrębie komponentów zaburzały działanie Reacta, powodując dziwne błędy przy kolejnych renderach.
Error boundaries to komponenty wyłapujące i rejestrujące błędy JS wszędzie w ramach komponentów podrzędnych (child). Pokazują awaryjne UI zamiast drzewa komponentów, które się zawiesiły.
Klasa staje się error boundary jeśli definiuje nową metodę cyklu życia zwaną componentDidCatch(error, info)
:
componentDidCatch(error, info) {
// Display fallback UI
this.setState({ hasError: true });
// You can also log the error to an error reporting service
logErrorToMyService(error, info);
}
Portale
React 16 ma teraz portale. To lepszy sposób renderowania elementu poza komponentem, w którym został stworzony.
render(){
return ReactDOM.createPortal(
this.props.children,
document.getElementById('mars')
)
}
w HTML zobaczymy:
<body>
<div id="earth"><!-- Everyone lives here --></div>
<div id="mars"><!-- Only the chosen one can teleport here --></div>
</body>
React nie tworzy nowego diva - renderuje child w domNode.
Specjalne atrybuty DOM
Wcześniej React ignorował nieznane atrybuty HTML i SVG. Teraz jest możliwe dodanie do węzłów DOM dowolnego atrybutu. Należy pamiętać o stosowaniu camelCase, aby postępować zgodnie z konwencją Reacta co do stosowania atrybutów w HTML.
Zmniejszony rozmiar biblioteki
React jest o 32% mniejszy w porównaniu do poprzednich wersji (30% po gzipowaniu :) ).
Wymagania środowiska JavaScript
Nowa wersja Reacta używa kolekcji typu Map i Set. Jeśli Twój projekt ma wspierać starsze przeglądarki i urządzenia, musisz dołączyć globalnie bibliotekę polyfill - np. core-js, czy babel-polyfill.