在React.js表单组件中使用状态或引用？

Question

我从React.js开始，我想做一个简单的表格，但是在文档中我找到了两种方法。在第一种是使用参考文献：var CommentForm = React.createClass({  handleSubmit: function(e) {    e.preventDefault();    var author = React.findDOMNode(this.refs.author).value.trim();    var text = React.findDOMNode(this.refs.text).value.trim();    if (!text || !author) {      return;    }    // TODO: send request to the server    React.findDOMNode(this.refs.author).value = '';    React.findDOMNode(this.refs.text).value = '';    return;  },  render: function() {    return (      <form className="commentForm" onSubmit={this.handleSubmit}>        <input type="text" placeholder="Your name" ref="author" />        <input type="text" placeholder="Say something..." ref="text" />        <input type="submit" value="Post" />      </form>    );  }});和第二个是使用状态的阵营部件内部：var TodoTextInput = React.createClass({  getInitialState: function() {    return {      value: this.props.value || ''    };  },  render: function() /*object*/ {    return (      <input className={this.props.className}      id={this.props.id}      placeholder={this.props.placeholder}      onBlur={this._save}      value={this.state.value}      />    );  },  _save: function() {    this.props.onSave(this.state.value);    this.setState({value: ''  });});如果存在，我看不到这两种选择的优缺点。谢谢。

Answer 1

我已经看到一些人引用以上答案作为“从不使用refs”的原因，我想发表自己的观点（以及与我交谈过的其他一些React开发人员）。

在谈论将其用于组件实例时，“不要使用引用”是正确的。意思是，您不应使用引用作为获取组件实例并在其上调用方法的方法。这是使用裁判的不正确方法，并且是裁判很快走到南边的时候。

使用引用的正确（且非常有用）的方法是当您使用引用从DOM中获得一些价值时。例如，如果您有一个将引用附加到该输入的输入字段，则稍后通过该引用获取值就可以了。如果没有这种方式，您就需要经过一个精心策划的过程，以使您的输入字段与您的本地州或流量存储区保持最新-这似乎是不必要的。

2019编辑：未来的朋友你好。除了我几年前提到的^之外，借助React Hooks，引用也是跟踪渲染之间的数据的好方法，并且不仅限于获取DOM节点。

Answer 2

一般来说，refs与React的声明式哲学背道而驰，因此您应将它们用作最后的选择。state / props尽可能使用。

要了解您在哪里使用refsvs state / props，让我们看一下React遵循的一些设计原则。

每个React 文档关于refs

避免将ref用于可以声明式完成的任何事情。

Per React关于逃生舱口的设计原则

如果很难以声明的方式表达一些对构建应用有用的模式，那么我们将为其提供命令性的API。（他们链接到这里的裁判）

这意味着React的团队建议避免refs和使用state / props以反应性/声明性方式可以完成的任何事情。

@Tyler McGinnis提供了一个很好的答案，并指出

正确（且非常有用）的引用使用方法是当您使用它们从DOM中获得一些价值时...

尽管可以做到这一点，但您将与React的理念背道而驰。如果您在输入中有价值，那么它肯定来自state / props。为了保持代码的一致性和可预测性，您还应该坚持在state / props那里。我承认refs有时可以为您提供更快的解决方案这一事实，因此，如果您进行概念验证，那么快速而肮脏的做法是可以接受的。

这给我们留下了几个具体的使用情况进行refs

管理焦点，文本选择或媒体播放。触发命令式动画。与第三方DOM库集成。