reactjs this.refs vs document.getElementById

Question

Jeśli mam tylko podstawowe formularze, czy powinienem nadal this.refs lub po prostu przejść z document.getElementById?

podstawowymi mam na myśli coś takiego:

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> 
    } 
} 

Czy istnieje minusem w użyciu jednego nad drugim?

Answer 1

Ogólnie rzecz biorąc, refs jest lepszy niż document.getElementById, ponieważ jest bardziej zgodny z resztą kodu reakcji.

Reagując, każda klasa komponentu może mieć wiele instancji składnika.
I jak @Isuru wskazuje na komentarze: używanie id jest niebezpieczne, ponieważ reagowanie nie zapobiega wyświetlaniu wielu formularzy na 1 stronie, a następnie DOM zawiera wiele danych wejściowych o tym samym identyfikatorze. A to nie jest dozwolone.

Kolejną zaletą korzystania z plików referencyjnych jest to, że zgodnie z projektem można uzyskać dostęp do informacji tylko w kontekście, w którym zostały zdefiniowane. Zmusza to do użycia rekwizytów i stanów (i ewentualnie zapisów), jeśli potrzebujesz dostępu do informacji poza tym kontekstem.
I to jest zaletą, ponieważ istnieje mniejsza/żadna szansa na złamanie jednokierunkowego przepływu danych, co spowodowałoby, że twój kod byłby mniej zarządzalny.

UWAGA: W prawie wszystkich przypadkach można całkowicie pominąć informacje. Jest to zasada projektowa dla Netflix do korzystania z bez referencji, nigdy, jak wyjaśniono przez Steve'a McGuire (Starszy inżynier interfejsu użytkownika w Netflix) w this video from reactjs conf 2016 (9: 58m do wideo).
W twoim przypadku oznaczałoby to wprowadzenie wartości wejściowej wiadomości e-mail w formie formularza, dodanie funkcji onChange i użycie wartości stanu w zdarzeniu submit.