reactjs this.refs vs document.getElementById

Question

如果我只有一個基本表單，我還應該使用this.refs還是只使用document.getElementById ？

基本上我的意思是：

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

使用一個而不是另一個有缺點嗎？

Answer 1

通常， refs比document.getElementById更好，因為它更符合您的反應代碼的其余部分。

在react中，每個組件類都可以有多個組件實例。
正如@Isuru在評論中指出的那樣：使用id是危險的，因為react不會阻止你在1頁上有多個表單，然后你的DOM包含多個具有相同ID的輸入。 這是不允許的。

使用refs的另一個好處是，通過設計，您只能在定義它的上下文中訪問refs。 如果您需要訪問此上下文之外的信息，這會強制您使用props和state（以及可能的商店）。
這是一個優勢，因為您可以減少/不可能破壞單向數據流，這會使您的代碼難以管理。

注意：幾乎在所有情況下，都可以完全避免參考。 Netflix的設計原則是不使用refs，正如Steve McGuire（Netflix的高級用戶界面工程師）在2016年的reactjs conf （9：58m進入視頻）的視頻中所解釋的那樣。
在您的情況下，這將意味着將電子郵件輸入值置於表單的狀態，添加onChange處理程序，並使用submit事件中的狀態值。