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

• 甲控制的部件是一个，通过取其电流值props和通过像回调通知变化onChange。父组件通过处理回调和管理自己的状态并将新值作为props传递给受控组件来“控制”它。您也可以将其称为“哑组件”。
• 一个不受控制的组件是一个存储其自己的内部状态，并且您使用查询DOM ref，当你需要它来找到它的当前值。这有点像传统的 HTML。

大多数原生 React 表单组件都支持受控和非受控使用：

// Controlled:
<input type="text" value={value} onChange={handleChange} />

// Uncontrolled:
<input type="text" defaultValue="foo" ref={inputRef} />
// Use `inputRef.current.value` to read the current value of <input>

在大多数（或所有）情况下，您应该使用受控组件。

他们都渲染表单元素

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

非受控组件和受控组件的不同之处在于它们从表单元素( <input>、<textarea>、<select>)访问数据的方式。

不受控制的组件

一种不受控制的组分是呈现形式的元件，其中，所述表格元素的数据由DOM（默认DOM行为）处理的组件。要访问输入的 DOM 节点并提取其值，您可以使用ref。

示例 - 不受控制的组件：

const { useRef } from 'react';

function Example () {
  const inputRef = useRef(null);
  return <input type="text" defaultValue="bar" ref={inputRef} />
}

受控组件

甲控制的部件是通过保持表单数据在该组件的状态呈现形式的元件和控制它们的成分。

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

我们通过设置它的属性和事件将表单元素（<input>,<textarea>或<select>）连接到状态来创建一个受控组件。valueonChange

示例 - 受控组件：

const { useState } from 'react';

function Controlled () {
  const [email, setEmail] = useState();

  const handleInput = (e) => setEmail(e.target.value);


  return <input type="text" value={email} onChange={handleInput} />;
}

受控组件是从回调函数中获取更改值的组件，非受控组件是从 DOM 中获取更改值的组件。例如，当输入值改变时，我们可以在受控组件中使用 onChange 函数，也可以像 ref 一样使用 DOM 获取值。

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

<ControlledComp value={this.props.fromParent}/>

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

<UncontrolledComp value={this.state.independentValue}/>