什么是 React 受控组件和非受控组件？

Question

什么是 ReactJS 中的受控组件和非受控组件？它们有什么不同？

Answer 1

它们都呈现表单元素

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

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

不受控制的组件

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

示例 - 不受控制的组件：

const { useRef } from 'react';

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

受控组件

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

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

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

示例 - 受控组件：

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} />;
}

Answer 2

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

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

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

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

Answer 3

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

Answer 4

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

• Controlled Component 是通过props 获取其当前值并通过onChange 等回调通知更改的方法。父组件通过处理回调和管理自己的状态并将新值作为道具传递给受控组件来“控制”它。您也可以将其称为“哑组件”。
• Uncontrolled Component 是在内部存储自己的状态的对象，您可以在需要时使用ref 查询 DOM 以找到其当前值。这有点像传统的 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>

在大多数（或所有）情况下you should use controlled components。