在React.js表单组件中使用状态还是引用？
我从React.js开始，我想做一个简单的表单，但在文档中我找到了两种方法。
first one正在使用Refs
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: ''
});
});如果有的话，我看不出这两种选择的利弊。谢谢。
回答 4
Stack Overflow用户
发布于 2015-04-08 10:05:10
简而言之:避免引用。
它们不利于可维护性，并且失去了render提供的WYSIWYG模型所提供的简单性。
你有一张表格。您需要添加一个重置窗体的按钮。
- refs：
- manipulate DOM
- render描述了表单3分钟后的外观
- manipulate DOM
- 状态
- setState
- render描述了表单looks
是如何
在输入中有一个CCV编号字段，在应用程序中还有一些其他字段是数字。现在，您需要强制用户只输入数字。
- refs：
- 添加一个onChange处理程序(如果不是number
，我们不是在onChange中使用refs来避免使用
- 吗
- 您已经有了一个onChange处理程序，如果if语句无效，则添加一个if语句，do nothing
- render仅在它将生成不同的result
时才会被调用
呃，不要紧，首相希望我们只做一个红色的方框阴影，如果它是无效的。
- refs：
- make onChange处理程序仅调用forceUpdate或something?
- make render output基于...嗯?在没有引用的情况下，我们从哪里获取要验证的值在render?
- manually中操作元素的重写dom property?
- I'm lost
- ？
- 在render中从dom读取，否则假定为valid?
基于this.state的
- 状态：
- 删除if statement
- make呈现验证
我们需要把控制权交还给父母。数据现在是道具，我们需要对变化做出反应。
- refs：
- 实现componentDidMount，componentWillUpdate和componentDidUpdate
- manually diff前面的道具
- 用最小的更改集操纵dom
- 嘿！我们在react...
- there's more中实现react，但是我的手指hurt
- 状态：
sed -e 's/this.state/this.props/' 's/handleChange/onChange/' -i form.js
人们认为裁判比保持状态“更容易”。这在前20分钟可能是真的，但在那之后的经验中就不是真的了。把你自己放在一个位置，说“是的，我会在5分钟内完成”，而不是“当然，我只会重写几个组件”。
Stack Overflow用户
发布于 2016-01-06 06:56:59
我已经看到一些人引用上面的答案作为“永远不要使用refs”的理由，我想给出我的(以及其他一些与我交谈过的反应开发人员)的意见。
在组件实例中使用refs时，“不要使用refs”的观点是正确的。这意味着，您不应该使用ref作为获取组件实例和调用它们的方法的方法。这是使用refs的不正确方式，并且是当refs快速向南移动时。
正确(且非常有用)使用ref的方法是当您使用它们从DOM中获取一些值时。例如，如果您有一个输入字段将ref附加到该输入，那么稍后通过ref抓取值就可以了。如果没有这种方法，您需要通过一个相当精心安排的过程来使您的输入域与您的本地州或您的流量存储保持最新-这似乎没有必要。
2019编辑:未来的朋友们好。除了我几年前提到的^，使用React Hooks，ref也是一种很好的方法来跟踪渲染之间的数据，而不仅仅限于抓取DOM节点。
Stack Overflow用户
发布于 2019-08-25 04:20:04
这篇文章很旧了。
关于这个问题，我将分享我在一个案例中的小小经验。
我正在处理一个包含大量“动态”输入和大量缓存数据的大组件(414行)。(我并不是一个人在页面上工作，我的感觉告诉我，代码的结构可能可以更好地拆分，但这不是重点(嗯，可能是这样，但我正在处理它)
我首先使用state来处理输入值：
const [inputsValues, setInputsValues] = useState([])
const setInputValue = (id, value) => {
const arr = [...inputsValues]
arr[id] = value
setInputsValues(arr)
}当然还有输入：
value={inputsValues[id] || ''}
onChange={event => setInputValue(id, event.target.value)}渲染非常繁重，以至于输入的变化像*一样不稳定(不要试图按住键，文本只会在暂停后出现)
我确信我可以使用refs来避免这种情况。
结果是这样的：
const inputsRef = useRef([])在输入中：
ref={input => (inputsRef.current[id] = input)}[在我的例子中，输入是Material-UI TextField，所以它是：
inputRef={input => (inputsRef.current[id] = input)}]
多亏了这一点，没有重新渲染，输入很流畅，功能也是这样工作的。它将节省周期和计算，因此也节省能源。为了地球x)
我的结论是:甚至可以需要输入值的useRef。
https://stackoverflow.com/questions/29503213
复制相似问题