Question

几乎在每个ReactJS教程中，甚至在the official documentation中用于处理输入更改，建议使用onChange。我们使用状态作为值并通过onChange更改它。这会在每个键击中触发渲染。所以，

为了娱乐和学习目的，我尝试了这些：

但是，我不喜欢他们中的任何一个并想问这个问题。如果实时输入值的变化对我们来说并不重要，我们只关心最后的输入，仍然在改变是要走的路？

Answer 1

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

有两种配置输入的方法

第一：受控输入

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

实施例

<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 virtualDOM的问题

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

仅在状态更改时才重新呈现虚拟树。因此，使用observable检查状态是否已更改是防止不必要的重新渲染的有效方法，这会导致大量不必要的树差异。

Answer 2

对我来说，除了实时验证之外，使用受控组件的主要原因是“单一真相来源”的原则。＆＃34;

对于不受控制的组件，表单输入和React组件中使用的输入值之间的输入值可能不同。您可以获取新值onBlur，但有些方法可以更改DOM中的值而不会发出此事件，在这种情况下，用户看到的值和您正在处理的值可能会有所不同，从而导致与用户期望的结果不同。

这可能不是一个大问题，但是由于React大量宣扬这个原则（比如不保持状态值可以从其他状态导出），我只是为了一致性而这样做。 / p>

此外，您无需担心每次输入的重新渲染成本。