在 React 开发中，表单处理 是一个非常常见但也容易被忽视的核心知识点。你是否曾在开发过程中纠结过：该用受控组件还是非受控组件？它们各自适用于什么场景？本文将带你从基础到实战，全面理解 受控组件与非受控组件的本质区别，并帮助你在实际项目中做出更合适的技术选型。
一、什么是受控组件？
在 React 中，受控组件（Controlled Components） 是指组件的表单数据由 React 的状态（state）来控制。也就是说，表单元素的值始终与组件的 state 保持同步。
🔧 实现方式：
- 使用
value属性绑定 state； - 使用
onChange事件更新 state。
jsx
function TextInput() {
const [value, setValue] = useState('');
return (
<input
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
);
}✅ 优点：
- 数据统一管理：所有输入值都保存在组件状态中，方便统一处理和验证；
- 实时响应：用户输入时可以立即进行校验、格式化、防抖、节流等操作；
- 与组件生命周期深度绑定，适合复杂的交互场景。
⚠️ 缺点：
- 性能开销 ：频繁的
onChange事件会触发多次 re-render； - 代码复杂度高：需要为每个表单元素维护 state 和更新逻辑；
- 对于简单表单，可能会显得"过度设计"。
二、非受控组件又是什么？
与受控组件相对，非受控组件（Uncontrolled Components） 不依赖 React 的 state 来管理表单数据，而是通过原生 DOM 来获取用户输入的值。它更像是传统的 HTML 表单行为。
🔧 实现方式：
- 使用
ref来访问 DOM 元素； - 表单提交时通过
ref.current.value获取输入值。
jsx
function TextInput() {
const inputRef = useRef();
const handleSubmit = (e) => {
e.preventDefault();
console.log(inputRef.current.value);
};
return (
<form onSubmit={handleSubmit}>
<input type="text" ref={inputRef} />
<button type="submit">提交</button>
</form>
);
}✅ 优点：
- 性能更优：没有频繁的 state 更新和 re-render；
- 代码简洁：适合只在提交时获取值的简单场景；
- 更贴近原生行为，适合快速开发或对交互要求不高的页面。
⚠️ 缺点：
- 数据不可控：无法在输入过程中实时校验或格式化；
- 与 React 的状态管理机制脱节；
- 不适合需要动态控制输入值的场景（如输入框的自动填充、联动等）。
三、如何选择？------ 用对的工具做对的事
| 场景 | 推荐方式 | 原因 |
|---|---|---|
| 表单需要实时校验、联动、格式化 | 受控组件 | 可以实时响应用户输入，控制数据流向 |
| 表单内容简单，提交后才处理 | 非受控组件 | 更轻量、性能更好 |
| 需要动态设置默认值 | 受控组件 | 可以通过 state 控制初始值 |
| 表单嵌套复杂、需要统一管理 | 受控组件 | 更容易集中管理表单状态 |
| 快速原型开发 | 非受控组件 | 开发效率高，代码更简洁 |
四、进阶技巧：优化受控组件的性能
虽然受控组件功能强大，但频繁的 onChange 确实会带来性能压力。我们可以使用以下方式优化：
✅ 1. 防抖（Debounce）
适用于搜索框、输入建议等场景：
jsx
const debouncedSetSearchTerm = useCallback(
debounce((value) => {
setSearchTerm(value);
}, 300),
[]
);
<input
value={input}
onChange={(e) => {
setInput(e.target.value);
debouncedSetSearchTerm(e.target.value);
}}
/>✅ 2. 节流（Throttle）
适用于滚动、窗口大小变化等高频事件：
jsx
const throttledHandleScroll = throttle(() => {
console.log('Scrolling...');
}, 200);
useEffect(() => {
window.addEventListener('scroll', throttledHandleScroll);
return () => window.removeEventListener('scroll', throttledHandleScroll);
}, []);✅ 3. 合理使用 useCallback 和 useRef
避免不必要的函数创建和 re-render，提升组件性能。
五、总结：选择适合你项目的表单策略
| 维度 | 受控组件 | 非受控组件 |
|---|---|---|
| 数据控制 | React State | DOM Ref |
| 实时响应 | ✅ | ❌ |
| 表单验证 | ✅ | ❌ |
| 性能 | ⚠️ 稍差 | ✅ 更优 |
| 代码复杂度 | ✅ 更可控 | ✅ 更简洁 |
| 适用场景 | 复杂交互表单 | 简单提交表单 |
✨ 结语
React 的表单处理没有绝对的"对"与"错"，只有"合适"与"不合适"。理解 受控组件与非受控组件的本质区别，才能在不同项目中灵活选择，写出更优雅、更高效的代码。
如果你正在构建一个需要强大交互能力的管理系统，那么受控组件是你的不二之选；而如果你只是快速实现一个静态页面的表单提交功能，非受控组件则更轻便高效。
无论你是初学者还是经验丰富的开发者，掌握这两种表单处理方式，都是提升 React 应用开发能力的关键一步。
🎯 记住一句话：
"受控组件是 React 的灵魂，非受控组件是开发效率的利器。 "