React 16: co nowego?

Kilka miesięcy temu pojawiła się nowa wersja biblioteki JavaScript, stworzonej przez developerów Facebooka - React v. 16.

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.