Quando utilizzare i componenti React basati sulla classe ES6 rispetto ai componenti React ES6 funzionali?

Dopo aver trascorso un po 'di tempo a imparare React, capisco la differenza tra i due paradigmi principali nella creazione di componenti.

La mia domanda è quando dovrei usare quale e perché? Quali sono i vantaggi / compromessi di uno rispetto all'altro?

Classi ES6:

import React, { Component } from 'react';

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

Funzionale:

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

Sto pensando funzionale ogni volta che non c'è stato che possa essere manipolato da quel componente, ma è così?

Suppongo che se utilizzo qualsiasi metodo del ciclo di vita, potrebbe essere meglio scegliere un componente di classe.

Hai l'idea giusta. Vai con funzionale se il tuo componente non fa molto di più che prendere alcuni oggetti di scena e render. Puoi pensarle come pure funzioni perché renderanno e si comporteranno sempre allo stesso modo, dati gli stessi oggetti di scena. Inoltre, non si preoccupano dei metodi del ciclo di vita o hanno il loro stato interno.

Perché sono leggeri, scrivere questi semplici componenti come componenti funzionali è piuttosto standard.

Se i tuoi componenti richiedono più funzionalità, come mantenere lo stato, usa invece le classi.

Maggiori informazioni: https://facebook.github.io/react/docs/reusable-components.html#es6-classes

EDIT : Gran parte di quanto sopra era vero, fino all'introduzione di React Hooks.

• componentDidUpdatepuò essere replicato con useEffect(fn), dove si fntrova la funzione da eseguire in seguito al nuovo rendering.

• componentDidMounti metodi possono essere replicati con useEffect(fn, []), dove si fntrova la funzione da eseguire con il reindirizzamento, ed []è una matrice di oggetti per i quali il componente eseguirà nuovamente il rendering, se e solo se almeno uno ha cambiato valore dal rendering precedente. Poiché non ce ne sono, useEffect()viene eseguito una volta, al primo montaggio.

• statepuò essere replicato con useState(), il cui valore di ritorno può essere destrutturato in un riferimento allo stato e in una funzione che può impostare lo stato (cioè, const [state, setState] = useState(initState)). Un esempio potrebbe spiegarlo più chiaramente:

const Counter = () => {
  const [count, setCount] = useState(0)

  const increment = () => { 
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
    </div>
  )
}

default export Counter

Per quanto riguarda la raccomandazione su quando utilizzare la classe rispetto ai componenti funzionali, Facebook consiglia ufficialmente di utilizzare componenti funzionali ove possibile . Per inciso, ho sentito un certo numero di persone che discutevano di non utilizzare componenti funzionali per motivi di prestazioni, in particolare quello

"Le funzioni di gestione degli eventi vengono ridefinite per rendering nei componenti funzionali"

Sebbene sia vero, ti preghiamo di considerare se i tuoi componenti stanno davvero eseguendo il rendering a una velocità o volume tale che ciò meriterebbe preoccupazione.

In tal caso, è possibile impedire la ridefinizione delle funzioni utilizzando useCallbacke useMemohook. Tuttavia, tieni presente che ciò potrebbe peggiorare (microscopicamente) il tuo codice in termini di prestazioni .

Ma onestamente, non ho mai sentito parlare di ridefinire le funzioni come un collo di bottiglia nelle app React. Le ottimizzazioni premature sono la radice di tutti i mali - preoccupati di questo quando è un problema