Evoluce tvorby komponent v Reactu

React ušel od svého vzniku velký kus cesty. A zatímco jeho klíčové myšlenky zůstaly stejné, způsob vyjádření těchto myšlenek se změnil. React je stále založen na tvorbě UI pomocí komponent, jejich tvorba (způsob zápisu) však prošla výraznou evolucí.

Specifikace

Od první veřejně dostupné verze 0.3.0 vydané v roce 2013 bylo možné vytvářet v Reactu komponenty pouze pomocí tzv. specifikací. Ona specifikace není nic jiného než objekt, který obsahuje metodu render a případně další metody související s životním cyklem komponenty nebo s jejím stavem.

const Counter = React.createClass({
  getInitialState: function() {
    return { value: 0 };
  },
  handleClick: function() {
    this.setState({ value: this.state.value + 1 });
  },
  render: function() {
    return (
      <button onClick={this.handleClick}>
        {this.state.value}
      </button>
    );
  },
});

Třídy

První přelomová verze z pohledu vytváření komponent přišla v roce 2015 a to konkrétně verze 0.13.0. V témže roce byl vydán ECMAScript v nové verzi 6, která (mimo jiné) přidala novou syntaxi pro psaní aplikací, třídy. Autoři Reactu tak nadále nebyli nuceni navrhovat vlastní systém tříd (což byly právě ony specifikace) a mohli se přeorientovat na použití standardu definovaného ECMAScriptem.

class Counter extends React.Component {
  state = { value: 0 };
  handleClick = () => {
    this.setState({ value: this.state.value + 1 });
  };
  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.value}
      </button>
    );
  }
}

Funkce

Rok 2015 přinesl první přelom v tvorbě komponent. A byl to ten samý rok, který zároveň naznačil, jak bude vypadat přelom následující. Ve verzi 0.14.0 dostali vývojáři možnost používat tzv. stateless function components (bezestavové funkcionální komponenty). Díky nim bylo možno komponenty zapisovat jako obyčejné jednoduché funkce. Jak však název napovídá, tento zápis neumožňoval použití vnitřního stavu komponenty, metod životního cyklu ani kontextu.

Toto vše změnila verze 16.8.0 z roku 2019, která přinesla tzv. Hooks. Hooks představují primitiva, díky kterým může i funkcionální komponenta používat stav, životní cyklus a řeší problémy, které s sebou přináší používání tříd (bindování funkcí, práce s klíčovým slovem this atd.)

const Counter = () => {
  const [value, setValue] = useState(0);
  const handleClick = () => {
    setValue(value + 1);
  };
  return (
    <button onClick={handleClick}>
      {value}
    </button>
  );
};