reactjs this.refs vs document.getElementById

Question

Se si dispone solo di un modulo di base, dovrei ancora this.refs o semplicemente andare con document.getElementById?

In base intendo qualcosa di simile:

export default class ForgetPasswordComponent extends React.Component { 
    constructor(props) { 
    super(props); 

    this.handleSendEmail = this.handleSendEmail.bind(this); 
    } 

    handleSendEmail(e) { 
    e.preventDefault(); 

    // this.refs.email.value 
    // document.getElementById('email').value 
    } 

    render() { 
    <form onSubmit={this.handleSendEmail}> 
     <input id="email" ref="email" type="text" /> 
     <input type="submit" /> 
    </form> 
    } 
} 

C'è un rovescio della medaglia in utilizzando uno sopra l'altro?

Answer 1

In generale, refs è migliore di document.getElementById, perché è più in linea con il resto del codice di risposta.

In risposta, ogni classe di componente può avere più istanze di componenti.
E come @Isuru sottolinea nei commenti: l'utilizzo di id è pericoloso, perché reagire non impedisce di avere più moduli su 1 pagina, e quindi il DOM contiene più input con lo stesso ID. E questo non è permesso.

Un altro vantaggio dell'utilizzo di refs è che, in base alla progettazione, è possibile accedere agli refs solo nel contesto in cui viene definito. Questo ti costringe a usare oggetti di scena e stato (e possibilmente negozi) se hai bisogno di accedere a informazioni al di fuori di questo contesto.
E questo è un vantaggio, perché ci sono meno/nessuna possibilità di rompere il flusso di dati unidirezionale, il che renderebbe il tuo codice meno gestibile.

NB: in quasi tutti i casi, i ref possono essere evitati del tutto. È un principio di progettazione per Netflix utilizzare senza riferimenti, sempre, come spiegato da Steve McGuire (Senior User Interface Engineer presso Netflix) in this video from reactjs conf 2016 (9: 58m nel video).
Nel tuo caso, ciò significherebbe inserire il valore di input della posta elettronica nello stato del modulo, aggiungere onchange handler e utilizzare il valore di stato nell'evento di invio.