Reactjs: qual è la differenza tra componente funzionale e componente di classe

Question

Qualcuno può spiegare in dettaglio la differenza tra componente funzionale e componente di classe in Reacjts? Quando usiamo il componente funzionale e quando usiamo il componente di classe.

Answer 1

Functional Stateless I componenti (la parola centrale che si è persa è quella importante) sono solo una funzione "stupida" che prende i puntelli come input e restituisce il markup. Non hanno alcuno stato o metodo o qualcosa del genere. A soli (props) => { return <span>props.foo</span>; }

componenti classe può avere statali, variabili, metodi ecc

Answer 2

Ecco un great article da Dan Abramov che può aiutare in questo.

E questo è un tl; dr; del mio modo di capire questo:

1. dovrete usare class CreatePostForm extends Component {} o React.createClass() se:

   • si necessitano di un accesso al tuo component's lifecycle methods (es .: componentWillMount o componentDidMount);
   • il tuo componente ha accesso diretto al tuo negozio e quindi detiene lo stato (alcune persone chiamano anche questo tipo di componenti, componenti intelligenti o contenitori).

2. Quando il componente solo ricevere oggetti di scena e li rende alla pagina, quindi avete un 'componente stateless' (che alcuni chiamano questi componenti componenti muti o componenti di presentazione) e può utilizzare una funzione pura per rappresentarlo e può essere semplice come questo

   import React from 'react'; export default() => <p>Hello from React!</p>;

Ora, è importante ricordare che una funzione di puro può ottenere modo più complesso di questo e se sei a tuo agio con un po 'la sintassi ESNext e destrutturazione e la diffusione attributi, tu può avere un componente di presentazione che assomiglia a questo:

import React from 'react'; 
import AnotherComponent from './AnotherComponent'; 

export default ({ children, ...rest }) => 
    <AnotherComponent extraProp="anExtraProp" { ...rest }> 
     { children } 
    </AnotherComponent>; 

Spero che questo aiuti.