在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库集成。