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

Question

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

1. 渲染真的那么便宜吗？
2. 输入值是否保存在 DOM 中？所以 DOM 和 VirtualDOM 之间没有区别，所以尽管渲染发生但没有任何变化？ (可能是错误的假设)。

出于娱乐和学习目的，我尝试了这些:

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

但是，我不喜欢他们中的任何一个，所以想问这个问题。如果实时输入值的变化对我们来说并不重要，我们只关心最后的输入，onChange 仍然是可行的方法吗？

Answer 1

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

有两种配置输入的方法

第一:受控输入

对于受控输入，您通常使用状态变量(或者在某些情况下甚至是 prop)来指定输入的值。在这种情况下，您需要调用 onChange 函数来设置状态(或 Prop )，因为值已设置为状态/ 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 的答案:

In React .js: is there any function similar like document.getElementById() in javascript ? how to select certain object?

关于你关于 React virtualDOM 的问题

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

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