受控制的和不受控制的组件ReactJs [英] Controlled vs uncontrolled components ReactJs
问题描述
几乎在每个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。
但是，我不喜欢他们中的任何一个并想问这个问题。如果实时输入值的变化对我们来说并不重要，我们只关心最后的输入，仍然在改变是要走的路？
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函数来设置状态（或prop），因为该值设置为state / prop，您需要更改它以更改值，否则它将保持不变。
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)}/>
获取输入值的另一种方法是访问DOM，我们使用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.
只有在状态发生变化时才会重新渲染虚拟树。因此，使用observable来检查状态是否已更改是防止不必要的重新渲染的有效方法，这会导致大量不必要的树差异。
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.
这篇关于受控制的和不受控制的组件ReactJs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
