React: kiedy używać komponentów klasy ES6 zamiast funkcjonalnych komponentów ES6?

Po spędzeniu trochę czasu na nauce Reacta Rozumiem różnicę między dwoma głównymi paradygmatami tworzenia komponentów

Moje pytanie brzmi, Kiedy powinienem użyć którego i dlaczego? jakie są korzyści / kompromisów jednego nad drugim?

Klasy ES6/7: 

import React, { Component } from 'react';

export class MyComponent extends Component {
  render() {
    return (
      <div></div>
    );
  }
}

Funkcjonalny: 

const MyComponent = (props) => {
    return (
      <div></div>
    );
}

Myślę o funkcjonalności, gdy nie ma stanu, który mógłby być manipulowany przez ten komponent...ale to wszystko?

Zgaduję, że jeśli używam metod cyklu życia, najlepiej byłoby użyć komponentu opartego na klasach.

Author: JordanHendrix, 2016-03-19
Source

3 answers

Masz dobry pomysł. Przejdź do funkcji, jeśli twój komponent nie robi nic więcej niż bierze niektóre rekwizyty i renderuje. Możesz myśleć o nich jako o czystych funkcjach, ponieważ zawsze będą renderować i zachowywać się tak samo, biorąc pod uwagę te same właściwości. Ponadto nie dbają o metody cyklu życia lub mają swój własny stan wewnętrzny.

Ponieważ są lekkie, pisanie tych prostych elementów jako elementów funkcjonalnych jest dość standardowe.

Jeśli Twoje komponenty potrzebują większej funkcjonalności, jak zachowując stan, zamiast tego używaj klas.

Więcej informacji: https://facebook.github.io/react/docs/reusable-components.html#es6-classes

 84
Author: Jeff Cousins,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-21 17:25:53

Zawsze staraj się używać funkcji bezstanowych (komponentów funkcjonalnych), o ile to możliwe. Są scenariusze, w których będziesz musiał użyć zwykłej klasy Reactowej:

  • komponent musi utrzymywać stan
  • komponent za bardzo renderuje i trzeba to kontrolować za pomocą shouldComponentUpdate
  • potrzebujesz komponentu kontenera

UPDATE

Istnieje teraz Klasa Reactowa o nazwie PureComponent, którą można rozszerzyć (zamiast Component), która implementuje własną shouldComponentUpdate to zajmie się płytkim porównaniem rekwizytów dla Ciebie. Czytaj więcej

 29
Author: ffxsam,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-12-19 07:24:38

Komponenty funkcjonalne nie są bardziej lekkie niż komponenty oparte na klasach, " działają dokładnie tak, jak Klasy."- https://github.com/facebook/react/issues/5677

Powyższy link jest trochę przestarzały, ale dokumentacja Reacta 16.3.1 mówi że elementy funkcjonalne i klasowe:

" są równoważne z punktu widzenia Reacta."- https://reactjs.org/docs/components-and-props.html#stateless-functions

Zasadniczo nie ma różnicy między komponent funkcyjny i komponent klasy, który implementuje metodę render, inną niż składnia.

Moim zdaniem, konsekwencja jest drogą do zrobienia. Często używam komponentów opartych na klasach dla "dodatkowych funkcji", takich jak stan, ale wolę również używać ich dla moich "komponentów funkcjonalnych", aby zachować spójność.

W przyszłości (cytując powyższy link) "możemy [React] dodać takie optymalizacje", ale na razie mój zespół uznał spójność za najlepszą opcję (szczególnie dla nieuniknionego nowego dewelopera, który przychodzi i jest zdezorientowany, gdzie this.props poszedł lub przypadkowo nazwie props coś innego w komponencie funkcjonalnym).

 4
Author: Galupuf,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-10 00:47:35