什么是受控组件和不受控制的组件？

Question

ReactJS中的受控组件和不受控制的组件是什么？他们如何彼此不同？

Answer 1

这与有状态DOM组件（表单元素）有关，React文档解释了差异：

• Controlled Component是通过props获取当前值并通过onChange等回调通知更改的Uncontrolled Component。父组件＆＃34;控制＆＃34;它通过处理回调并管理自己的状态并将新值作为props传递给受控组件。你也可以称之为“愚蠢的组件”＃34;。
• you should use controlled components是在内部存储自己的状态的，ref使用data查询DOM，以便在需要时查找其当前值。这有点像传统的HTML。

在大多数（或所有）案例中{{3}}。

Answer 2

它们都渲染表单元素

非受控组件和受控组件是用来描述呈现HTML表单元素的React组件的术语。每次您创建一个呈现 HTML 表单元素的 React 组件时，您都是在创建这两个组件之一。

非受控组件和受控组件的区别在于它们从表单元素（<input>、{{ 1}}, <textarea>).

不受控制的组件

uncontrolled component 是呈现表单元素的组件，其中表单元素的数据由 DOM 处理（默认 DOM 行为）。要访问输入的 DOM 节点并提取其值，您可以使用 ref。

示例 - 不受控制的组件：

<select>

受控组件

controlled component 是一个组件，它呈现表单元素并通过将表单数据保持在组件的状态来控制它们。

在受控组件中，表单元素的数据由 React 组件（而不是 DOM）处理并保持组件的状态。受控组件基本上覆盖了 HTML 表单元素的默认行为。

我们通过设置其属性 {{1} 将表单元素（const { useRef } from 'react'; function Example () { const inputRef = useRef(null); return <input type="text" defaultValue="bar" ref={inputRef}/> } 、<input> 或 <textarea>）连接到 状态 } 和事件 <select>。

示例 - 受控组件：

value

Answer 3

受控组件是从回调函数获取更改的值的组件 和 不受控制的组件是具有来自DOM的组件的组件。 例如， 当输入值更改时，我们可以在受控组件中使用onChange函数， 我们也可以使用ref这样的DOM来获取值。

Answer 4

• 受控组件使用回调向其他组件通知有关更改的信息。例如：<Button onClick={() => console.log("clicked")}>Click</Button>。
• 不受控制的组件不会将其他组件的更改通知其他组件，您只能使用ref-s访问组件。如果您需要访问HTML元素的真实用法，则Ref可能会有用

Answer 5

受控组件主要是那些组件的任何 prop 值都来自父组件或存储（如 redux 的情况）的组件。

例如。

而在不受控制的组件的情况下，可以根据事件处理从组件的状态中获取组件值。

例如。