React v16.0.0 – co nowego?

Fiber

Czyli przepisany główny algorytm Reacta. Troche jak ze starcraftem 1 remastered. Niby stare, ale nowe. Fiber pozwolił na dodanie m.in. obsługi błędów. Choć powstał głównie po to, aby za kilka miesięcy, w wersji 16.x, React wprowadził wsparcie dla asynchronicznego renderowania (czytaj: zwiększenie wydajności renderowania wielkich drzew komponentów). Czytaj więcej tutaj….

Choć lepiej nie czytaj. Oglądnij sobie to:

Niestandardowe atrybuty DOM

React 15 nie pozwalał na użycie jakogokolwiek niestandardowego atrybutu – po prostu je wycinał. Akceptował tylko standardowe atrybuty DOM oraz data-, aria- atrybuty. React 16 – przeciwnie. Możesz dodać dowolny, najbardziej wymyślny atrybut do kodu HTML czy SVG. Uwaga – pamiętaj o camelCase, on nadal obowiązuje. Dan Abramov więcej na ten temat…

<div wpisujeCokolwiekBoMoge="cokolwiek"></div>

Nowe atrybuty metody render() – Arrays, Strings, Numbers

W React 15 mogliśmy przekazać do metody render() tylko pojedynczy reactowy element. Teraz możemy zwracać tekst, liczby lub tablice. Hurra!

class MyArrayComponent extends React.Component {
  render() {
    return [
      <div key="1">first element</div>, 
      <div key="2">second element</div>
    ];
  }
}

class MyStringComponent extends React.Component {
  render() {
    return "hey there";
  }
}

class MyNumberComponent extends React.Component {
  render() {
    return 2;
  }
}

Oczywiście działa to zarówno dla metody render() w CSR (Client Side Rendering) oraz hydrate() w SSR (Server Side Rendering), o której przeczytasz poniżej.

Obsługa błędów

Przedstawione zostały nowe komponenty, tzw. error boundaries. Wybaczcie – nie przetłumaczę Mają one za zadanie łapać i obsługiwać błędy wśród swoich dzieci.

<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

Taki komponent definiujemy poprzez umieszczenie w nim nowej metody componentDidCatch() (tzw. lifecycle method), która robi całą brudną robotę. Mówi się o niej, jako o deklaratywnej wersji try {} catch. React przed wersją 16 miał podobną metodę unstable_handleError. Przy updajcie należy podmienić jej nazwę na componentDidCatch i wszystko powinno działać. Uwaga, metoda działa tylko dla CSR (narazie).

Ilość, zagęszczenie w kodzie error boundaries zależy od nas. Twórcy Reacta nie sugerują jakiejś konkretnej strategii.

A co z błędami, które nie zostaną obsłużone przez error boundaries? Od v16 takie błędy poskutkują wyrzuceniem całego komponentu z UI. Twórcy Reacta zdecydowali, że lepiej nic nie pokazywać użytkownikom, niż pokazywać błędną aplikację. I dobrze! Choć ta zmiana na pewno wywoła niejedno zgrzytanie zębów przy updajcie…

Czytaj więcej o obsłudze błędów

Portale

Portale umożliwiają renderowanie elementów poza komponentami. Brzmi pokrętnie, wiem.

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

ReactDOM.createPortal(child, container)

Tak wprowadza nas w temat dokumentacja. Znów nie będę tego tłumaczyć na język polski, bo nie będzie to ani dobrze brzmieć, ani wyglądać. Ja rozumiem to tak: tworzymy jakiś element, ale nie chcemy go standardowo wkładać do drzewka, w miejsce, gdzie według teorii, a raczej według kodu powinien wejść. Chcemy go umieścić na drugim końcu drzewka. Bierzemy portal i czary mary hukus pokus – mamy to!

Przykłady z życia wzięte: popupy, loadery, tooltipy.

Uwaga, portale działają tylko dla CSR (narazie). Czytaj więcej o portalach…

hydrate() w SSR

Dla SSR metoda render() została zastąpiona metodą hydrate()

hydrate(<App/>, document.getElementById("root"));

Szczegóły tutaj.

Zmiany w zachowaniu setState

Od v16 wywołanie setState z null’em nie wywoła aktualizacji i ponownego renderowania komponentu. Plus 1 do wydajności.

React.createClass, React.PropTypes, React.DOM…

są wyrzucone z Reacta. Już w wersji 15.5 miały status deprecated. Teraz, aby z nich skorzystać, należy dociągnąć odpowiednie paczki.

Licencja MIT

Zmieniono licencję Reacta na MIT (daje użytkownikom nieograniczone prawo do używania, kopiowania, modyfikowania i rozpowszechniania (w tym sprzedaży) oryginalnego lub zmodyfikowanego programu w postaci binarnej lub źródłowej – wiki). Więcej info tutaj

Rozmiar pliku

React stał się lżejszy pomimo dodania do niego kilku funkcjonalności. Inaczej stać się nie mogło. Już od dawna frontowa społeczność krzywym okiem spoglądała na gabaryty Reacta. Tak oto wybił się np. Preact. To ile waży ten React v16?

• react 5.3 kb (2.2 kb gzipped), wcześniej 20.7 kb (6.9 kb gzipped).
• react-dom 103.7 kb (32.6 kb gzipped), down from 141 kb (42.9 kb gzipped).
• react + react-dom 109 kb (34.8 kb gzipped), down from 161.7 kb (49.8 kb gzipped).

Wsparcie

React v16 opiera się na Map i Set. Jeśli musisz wspierać IE<11, poszukaj polyfilli takich jak core-js or babel-polyfill.