React中的受控组件与非受控组件 [英] Controlled vs uncontrolled components in React
问题描述
几乎在每个ReactJS教程中，甚至甚至在官方文档中进行处理输入更改，建议使用onChange.我们使用状态作为值，并通过onChange对其进行更改.这将在每个按键中触发渲染.因此，
Almost in every ReactJS tutorial or even in the official documentation for handling input changes, onChange is recommended. We use a state for the value and change it via onChange. This triggers the render in every key stroke. So,
- 渲染真的那么便宜吗?
- 输入值是否不保存在DOM中?因此DOM和VirtualDOM之间没有区别，因此尽管渲染发生了什么变化? (可能是错误的假设).
只是出于娱乐和学习目的，我尝试了以下方法:
Just for fun and learning purposes I tried those:
- 使用自定义函数和变量来保存该值，而不是在每次击键时都设置最后一次输入后的状态，并传递与该值相关的组件等.
- 使用onBlur代替onChange.
但是，我不喜欢他们中的任何一个，并且想问这个问题.如果实时输入值更改对我们不重要，那么我们只关心最后一个输入，仍然要使用onChange吗?
But, I don't like either of them and want to ask this question. If live input value changes is not important for us, we only care for the last input, still onChange is the way to go?
推荐答案
React非常有效地处理了重新渲染.它仅重新渲染更改.
React handles the re-rendering very efficiently.It only re-renders the changes.
有两种配置输入的方法
首先:受控输入
对于受控输入，通常使用状态变量(在某些情况下甚至是prop)来指定输入的值.在这种情况下，您需要调用onChange函数来设置状态(或属性)，因为该值已设置为状态/属性，并且您需要对其进行更改以更改该值，否则它将保持不变.
With a controlled input, you specify the value of the input with a state variable generally(or even a prop in some cases). In this case you need to call the onChange function to set the state(or the prop) since the value is set to a state/prop and you need to change that to change the value otherwise it will remain the same.
Ex
<input value={this.state.textVal} onChange={(e) => this.setState({textVal: e.target.value}) />
具有受控输入的优点是，您在整个React组件中都具有可用的值，并且不需要在输入上触发事件或访问DOM即可获取该值.
The advantages of having a controlled input is that you have the value available throughout you React component and you do not need an event to be fired on input or access the DOM to get the value.
第二:不受控制的输入
在这种情况下，您不需要onChange处理程序来获取输入，因为您无需为输入指定自定义值.输入的值可以通过访问dom或从事件对象中获取
In this case you don't need an onChange handler to get the input as you don't specify a custom value for the input. The value of the input can be fetched by accessing the dom or from an event object
例如:
<input type="text" onBlur={(e) => {console.log(e.target.value)}/>
获取输入值的另一种方法是访问我们使用refs作为this.inputVal.value
The other way to get the input value will be by accessing the DOM which we do using refs as this.inputVal.value
有关如何使用ref的信息，请参见以下答案:
See this answer on how to use ref:
在React .js中:是否有类似JavaScript中的document.getElementById()之类的函数?如何选择某些对象?
关于您对React virtualDOM的疑问
Regarding you question on React virtualDOM
虚拟DOM用于有效地重新渲染DOM.这实际上与对数据进行脏检查没有关系.您可以使用带有或不带有脏检查的虚拟DOM重新渲染.计算两个虚拟树之间的差异时会有一些开销，但是虚拟DOM差异是关于了解DOM中需要更新的内容，而不是了解您的数据是否已更改.
The virtual DOM is used for efficient re-rendering of the DOM. This isn't really related to dirty checking your data. You could re-render using a virtual DOM with or without dirty checking. There is some overhead in computing the diff between two virtual trees, but the virtual DOM diff is about understanding what needs updating in the DOM and not whether or not your data has changed.
仅在状态更改时才重新渲染虚拟树.因此，使用可观察对象来检查状态是否已更改是防止不必要的重新渲染的有效方法，因为重新渲染会导致大量不必要的树差异.
Virtual tree is re-renderd only when the state changes. So using an observable to check if the state has changed is an efficient way to prevent unnecessary re-renders, which would cause lots of unnecessary tree diffs.
这篇关于React中的受控组件与非受控组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
