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中需要更新的内容，而不是了解您的数据是否已更改。

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