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

我从React.js开始，我想做一个简单的形式，但在documentacion我找到了两种方法。
first one正在使用参考：

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

而second one在React组件中使用状态：

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: ''
    });
  });

我看不出两种选择的利弊，如果有的话。
谢谢。

短版本：避免refs。

它们不利于可维护性，并且失去了WYSIWYG模型渲染提供的许多简单性。

你有一个表格。您需要添加一个重置表单的按钮。

> refs：

>操纵DOM
> render描述了3分钟前表单看起来的样子

>状态

> setstate
> render描述表单的外观

在输入中有一个CCV号字段，在应用程序中有一些其他字段是数字。现在你需要强制用户只输入数字。

> refs：

>添加一个onChange处理程序(不是我们使用refs来避免这个？)
>如果不是数字，在onChange中操纵dom

>状态

>你已经有一个onChange处理程序
>添加一个if语句，如果它无效则什么都不做
> render只有当它产生不同的结果时才被调用

嗯，永远不会，PM想让我们只是做一个红色的盒子阴影，如果它是无效的。

> refs：

> make onChange处理程序只是调用forceUpdate或什么？
> make render输出基于… huh？
>我们在render中获取要验证的值在哪里？
>手动操作元素的className dom属性？
>我迷路了
>重写没有refs？
>从dom中读取渲染如果我们安装否则认为有效？

>状态：

> remove if语句
> make render基于this.state验证

我们需要将控制权交给父母。数据现在在道具，我们需要对变化做出反应。

> refs：

>实现componentDidMount，componentWillUpdate和componentDidUpdate
>手动比较以前的道具
>用最小的变化集操纵dom
>嘿！我们正在实施反应…
>还有更多，但我的手指伤了

>状态：

> sed -e’s / this.state / this.props /”s / handleChange / onChange /’-i form.js

人们认为引用比保持状态更容易。这可能是真的在前20分钟，这不是真的在我的经验之后。让你的自我在一个位置说：“是的，我会在5分钟内完成，而不是”当然，我只是重写一些组件“。