React 中的受控组件与非受控组件

Question

几乎在每个 ReactJS 教程中，甚至在处理输入更改的官方文档中，都推荐使用 onChange。 我们为值使用状态并通过 onChange 更改它。 这会在每次击键时触发渲染。 所以，

渲染真的那么便宜吗？
输入值是否未保存在 DOM 中？ 所以 DOM 和 VirtualDOM 之间没有区别，所以虽然渲染发生了什么变化？ （可能是错误的假设）。

只是为了好玩和学习的目的，我尝试了这些：

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

Answer 1

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

有两种方法可以配置输入

第一：受控输入

对于受控输入，您通常使用状态变量（或在某些情况下甚至是道具）指定输入的值。 在这种情况下，您需要调用 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 as this.inputVal.value

请参阅有关如何使用 ref 的答案：

关于你关于 React virtualDOM 的问题

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

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

Answer 2

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

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

这可能不是一个大问题，但是由于 React 经常宣扬这个原则（比如不将值保持在可以从其他状态派生的状态中），我只是为了一致性而这样做。

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