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 代码的其余部分。

在 react 中，每个组件类都可以有多个组件实例。
正如@Isuru 在 cmets 中指出的那样：使用 id 是危险的，因为 react 不会阻止您在一页上有多个表单，然后您的 DOM 包含具有相同 ID 的多个输入。这是不允许的。

使用 refs 的另一个优点是，根据设计，您只能在定义它的上下文中访问 refs。如果您需要访问此上下文之外的信息，这会迫使您使用道具和状态（可能还有商店）。
这是一个优势，因为您破坏单向数据流的机会更少/没有机会，这会使您的代码更难管理。

注意：几乎在所有情况下，都可以完全避免使用 refs。 Netflix 的设计原则是no refs, ever，正如 Steve McGuire（Netflix 的高级用户界面工程师）在 this video from reactjs conf 2016（视频 9:58 米）中所解释的那样。
在您的情况下，这意味着将电子邮件输入值置于表单状态，添加 onChange 处理程序，并在提交事件中使用状态值。