受控组件和非受控组件

在 React 中，表单元素的数据（State）由谁来管理，是区分这两种模式的根本。

1. 受控组件
2. 非受控组件

受控组件

在受控组件中，表单元素的值由 React 的 state 完全控制。React state 是表单数据的“唯一数据源”

工作流程：

1. 组件 state 中存储着表单的当前值。
2. state 值通过 value prop 转递给表单元素。
3. 用户交互（例如：输入）触发 onChange 事件。
4. 在 onChange 事件处理器中更新组件的 state。
5. state 更新后，React 重新渲染组件，表单元素的值更新为最新的 state。

非受控组件

非受控组件中，表单数据由 DOM 自身管理。React 不再直接控制表单元素的值，而是通过 ref 获取对 DOM 节点的直接引用，在需要的时候（例如：表单提交）“拉取”其当前的值。

工作流程：

1. 使用 useRef 创建一个引用。
2. 通过 ref prop 将其附加到一个 DOM 元素上。
3. 使用 defaultValue 设置初始值，而不是 value。
4. 在需要时通过 ref.current.value 读取值。

受控组件 vs 非受控组件

特性	受控组件	非受控组件
数据流	单向数据流	DOM 自身管理 state
值来源	React state 是唯一数据源	DOM 是数据源，通过 ref 读取
实现方式	value + onChange + useState	ref + defaultValue
实时交互	可轻松实现即时验证、动态 UI	需在事件中手动获取值
复杂度	需要更多模板代码	代码简洁