受控组件:表单数据由React组件处理。

ReactJS中受控组件的流程 图像

不受控组件:表单数据由DOM本身处理。

ReactJS中未受控组件的流 图像

受控组件主要是那些组件的道具值来自父组件或来自存储的组件(如redux的情况)。例子:

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

对于不受控制的组件，可以根据事件处理从组件的状态中获取组件值。例子:

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

受控组件:表单数据由React组件处理。

ReactJS中受控组件的流程 图像

不受控组件:表单数据由DOM本身处理。

ReactJS中未受控组件的流 图像

受控组件是从回调函数获取更改值的组件 而且 未受控组件是拥有来自DOM的组件。 例如, 当输入值发生变化时，我们可以使用受控组件中的onChange函数 我们也可以使用像ref这样的DOM来获取值。

它们都渲染表单元素

未受控组件和受控组件是用于描述呈现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)处理，并保存在组件的状态中。受控组件基本上会覆盖HTML表单元素的默认行为。

我们通过设置表单元素的属性值和事件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} />;
}

受控制的组件不保持它们的状态。

它们需要的数据从父组件传递给它们。

它们通过回调函数与这些数据交互，回调函数也从父进程传递给子进程。