前端 - React 受控组件和非受控组件

React JS 中的受控组件和非受控组件是什么

当我们谈论受控和非受控组件时，它总是指处理表单或表单输入的组件。因此，在 ReactJS 中，用户所做的每一个动作或参与都与我们在编写组件时处理的事件纠缠在一起。 现在对于 HTML 表单元素，用户交互或更改可以在 React 中以两种不同的方法捕获。

受控组件

顾名思义，在受控组件中，表单输入元素的值和突变完全由事件处理程序驱动，输入元素的值始终从状态中推断出来。

例如：

让我们从这个例子中了解受控组件的两个最重要的方面——

文本输入的值属性设置为组件状态“文本”。 这非常重要，因此输入组件的值将始终与组件状态“文本”的值同步。其次，每当用户尝试更新输入元素的值时，我们都会处理输入元素发出的onChange事件。 在处理函数内部，我们正在使用更新的输入值改变“Name”状态。

现在随着状态的改变，需要使用更新的值重新渲染输入元素。 因此，用户所做的更改也将反映在 UI 上。

所以，如果您需要通过更改输入来更新视图，那么使用受控输入将节省大量时间并确保代码更清晰。

非受控组件

如果你看过以上受控组件的要点和例子，那么你已经猜到非受控组件是如何工作的了。 是的，它们不对输入元素或任何事件处理程序使用任何状态。 这种类型的组件不关心输入元素的实时值变化。

您现在可能想知道，那么我们如何获取输入元素的值呢？

嗯，这就是 Refs 来救援的地方。 对于初学者来说，React 生态系统中的 Refs 就像指针一样，可以访问 DOM 节点。 在非受控制的组件中，我们使用 Refs 来访问输入元素的值。

例如：

从上面的示例中看到，没有任何状态管理。 此外，我们没有使用任何更改事件处理程序。如果想访问input元素，可以使用ref将它们关联起来。此后，在表单提交处理程序中，我们可以通过访问 ref 的当前值轻松访问输入的值，如下所示：

如果您在功能组件中有输入元素，或者表单中存在的输入元素数量非常少，并且每次更改都不需要更新或验证或与状态同步，那么使用非受控制的组件可以为您节省一些代码。

React JS 中受控组件和非受控组件有什么区别？

• 在受控组件中，表单数据由 React 组件处理。 而在非受控制的组件中，表单数据由 DOM 本身处理。
• 组件状态的使用对于受控组件是必须的。 对于非受控制的组件，状态的使用是完全可选的，但必须在其中使用 Refs。
• 对于受控组件，我们可以在输入更改时进行验证，但对于非受控组件则不可能。
• 对于受控组件，value和onChange都会被设置，而非受控组件则不要。

我们应该使用哪个？

如前所述，这完全取决于您的用例。 如果您正在使用一个大型应用程序，其中所有输入组件都已创建为通用组件以保持应用程序之间的一致性，那么最好将它们用作受控组件，因为这样可以在不传递 refs 的情况下使用它们。

类似地，如果该组件用于一个相对较小的项目，在渲染函数中直接实现 HTML 表单元素，并且您不需要运行时更改事件来执行任何操作，那么使用不受控制的组件进行管理会容易得多。

希望这篇文章对您有所帮助，感谢阅读！