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: '' }); });
我看不出两种选择的利弊,如果有的话。
谢谢。
它们不利于可维护性,并且失去了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分钟内完成,而不是”当然,我只是重写一些组件“。