在 React 中，表单是与用户交互的重要部分。为了更有效地管理用户输入，React 提供了两种主要的方式：受控组件（Controlled Components） 和 非受控组件（Uncontrolled Components）。本文将深入探讨这两种方式的工作原理、适用场景及其底层逻辑。
一、受控组件（Controlled Components）
什么是受控组件？
受控组件是指其值由 React 组件的状态（state）控制的表单元素。这意味着输入框的值总是通过 React 状态来同步和更新。
核心机制
- 状态管理：使用
useState来保存输入框的当前值。 - 事件监听：通过
onChange监听用户的每次输入，并更新状态。 - 数据绑定：使用
value={state}将输入框的值绑定到状态。
const [value, setValue] = useState('');
<input
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
适用场景
受控组件非常适合需要实时校验或动态控制输入内容的场景。例如：
- 需要实时校验输入内容的有效性。
- 数据需要与其他状态进行联动。
- 构建复杂的表单系统，如注册、登录等。
优势与缺点
-
✅ 优势：
- 数据与 UI 同步，便于管理。
- 支持复杂的交互逻辑。
- 适合需要高交互性的场景。
-
❌ 缺点：
- 每次输入都会触发状态更新，可能带来性能开销。
- 对于大型表单，状态管理会变得复杂。
二、非受控组件（Uncontrolled Components）
什么是非受控组件？
非受控组件是指其值由 DOM 自身管理，而不是由 React 的状态控制。React 通过 useRef 获取 DOM 元素的引用，并在需要时（如表单提交）读取其值。
核心机制
- 引用管理：使用
useRef创建对 DOM 元素的引用。 - 数据获取：在表单提交时通过
ref.current.value获取当前输入值。 - 不依赖状态：不使用
onChange事件，也不更新 React 的状态。 - 不触发重新渲染：输入过程不触发组件重新渲染，性能更高。
const inputRef = useRef();
<input type="text" ref={inputRef} />
适用场景
非受控组件适用于以下场景：
- 表单结构简单，仅用于提交。
- 对性能有较高要求。
- 不需要实时校验或动态交互。
- 希望减少状态管理的复杂度。
优势与缺点
-
✅ 优势：
- 性能更高，适合大型表单中对交互要求不高的字段。
- 更接近原生 HTML 表单行为。
- 代码更简洁，状态管理更少。
-
❌ 缺点：
- 不支持实时校验。
- 不适合需要动态控制输入内容的场景。
- 初始值设置不够灵活。
三、两者对比分析
虽然受控组件和非受控组件都能实现表单输入的处理，但它们在数据管理、性能、交互逻辑等方面有明显差异。
数据流向与控制
- 受控组件：数据流从 React state 到 UI，确保数据与 UI 同步。
- 非受控组件：数据流从 DOM 到 UI，React 不直接参与输入过程。
事件处理
- 受控组件：频繁监听输入变化，通过
onChange更新状态。 - 非受控组件：不监听输入变化，仅在需要时通过
ref获取值。
渲染机制
- 受控组件：每次状态更新都会触发重新渲染。
- 非受控组件：不触发重新渲染，性能更高。
| 特性 | 受控组件 | 非受控组件 |
|---|---|---|
| 数据来源 | React 的 state | DOM |
| 是否监听输入 | 是，通过 onChange | 否，通过 ref 获取 |
| 是否重新渲染 | 是 | 否 |
| 实时验证 | 支持 | 不支持 |
| 性能 | 略低（频繁更新状态） | 更高（不更新状态） |
| 初始值设置 | 明确、统一 | 依赖 DOM 属性（如 defaultValue） |
| 适用场景 | 复杂表单、动态交互、验证逻辑 | 简单输入、性能要求高的场景 |
四、如何选择？
选择受控组件还是非受控组件，取决于你的具体业务需求和性能目标。
-
✅ 使用受控组件：
- 需要实时校验或动态控制输入。
- 数据需要与其他状态联动。
- 构建复杂的表单系统。
-
✅ 使用非受控组件：
- 表单结构简单，仅用于提交。
- 对性能有较高要求。
- 希望减少状态管理的复杂度。
五、总结
受控组件和非受控组件是 React 表单处理的两种核心方式：
- 受控组件：数据由 React 控制，适合需要高交互性的场景。
- 非受控组件：数据由 DOM 控制，性能更优，适合简单输入。
掌握它们的本质和使用场景，能够帮助你在实际开发中做出更合理的技术选型，写出更高效、更稳定的 React 表单逻辑。
📌 如果你喜欢这篇文章，欢迎点赞、收藏或分享给更多开发者朋友！
