React w działaniu

Rozdział 4. Funkcyjny komponent Excel

Pamiętasz komponenty funkcyjne? W rozdziale 2., po wprowadzeniu koncepcji stanu, przestaliśmy się zajmować komponentami funkcyjnymi. Czas do nich wrócić.

Krótkie przypomnienie: komponenty funkcyjne kontra komponenty klasowe

Najprostszy komponent klasowy wymaga tylko implementacji metody render(). W niej tworzymy interfejs użytkownika, opcjonalnie wykorzystując obiekty this.props i this.state:

class Widget extends React.Component {

   render() {

      let ui;

      // zabawa z obiektami this.props i this.state

      return <div>{ui}</div>;

   } 

}

W komponencie funkcyjnym cały komponent jest funkcją, a interfejsem użytkownika jest to, co funkcja zwraca. Właściwości przekazuje się do funkcji podczas konstruowania ...