受控组件与非受控组件ReactJs

Question

几乎在每个ReactJS教程中，甚至在用于处理输入更改的官方文档中，都建议使用onChange。我们使用状态作为值，并通过onChange对其进行更改。这会在每个按键中触发渲染。所以，

1. 渲染真的那么便宜吗？
2. 输入值不保存在DOM中吗？因此DOM和VirtualDOM之间没有区别，因此尽管渲染发生了什么变化？（可能是错误的假设）。

出于娱乐和学习目的，我尝试了以下方法：

1. 使用自定义函数和变量来保存该值，而不是在每次击键时都设置上次输入后的状态，并传递与该值相关的组件等。
2. 使用onBlur而不是onChange。

但是，我不喜欢他们中的任何一个，并且想问这个问题。如果实时输入值更改对我们不重要，我们只关心最后一个输入，那么onChange还是可行的方法？

Answer 1

React非常有效地处理了重新渲染，只重新渲染了更改。

有两种配置输入的方法

第一：受控输入

使用受控输入时，通常使用状态变量（甚至在某些情况下甚至是prop）来指定输入的值。在这种情况下，您需要调用onChange函数来设置状态（或属性），因为该值被设置为状态/属性，并且您需要更改该值以更改该值，否则它将保持不变。

防爆

<input value={this.state.textVal} onChange={(e) => this.setState({textVal: e.target.value}) />

具有受控输入的优点是，您在整个React组件中都具有可用的值，并且不需要在输入上触发事件或访问DOM即可获取该值。

第二：不受控制的输入

在这种情况下，您不需要onChange处理程序来获取输入，因为您无需为输入指定自定义值。输入的值可以通过访问dom或从事件对象中获取

例如：

<input type="text" onBlur={(e) => {console.log(e.target.value)}/>

获取输入值的另一种方法是访问DOM，我们使用refs作为 this.inputVal.value

有关如何使用ref的信息，请参见以下答案：

在React.js中：有没有类似JavaScript中的document.getElementById（）之类的函数？如何选择某个对象？

关于您对React virtualDOM的质疑

虚拟DOM用于有效地重新渲染DOM。这实际上与对数据进行脏检查无关。您可以使用带有或不带有脏检查的虚拟DOM重新渲染。计算两个虚拟树之间的差异时会有一些开销，但是虚拟DOM差异是关于了解DOM中需要更新的内容，而不是了解您的数据是否已更改。

仅在状态更改时才重新渲染虚拟树。因此，使用可观察对象来检查状态是否已更改是防止不必要的重新渲染的有效方法，因为重新渲染会导致大量不必要的树差异。