按理说，

React 进阶必修：彻底搞懂受控组件与非受控组件

📖 为什么你需要理解这个？

在 React 开发中，表单无处不在——登录注册、搜索框、评论输入、数据筛选…，几乎每一个应用都离不开表单。

而 React 处理表单的方式，和原生 HTML 有着本质的区别。如果你只能“写出来”，却说不清为什么这么写那么这篇文章就是为你准备的。

这篇文章基于一个完整的项目 Demo。逐组件逐行剖析，帮你，

一、两种哲学：谁才是数据的“主人”？

表单数据有两个可能的归属：

• 受控组件表单数据存储在 React State 中。State 是唯一的真相来源，React 驱动 UI 的每一次更新。不过，
• 非受控组件表单数据由 DOM 自身维护。React 不参与中间过程，只在需要时通过 ref 去读取 DOM 的当前值。

二、受控组件

最简示例这方面，一切从 state 开始

import { useState } from 'react';function ControlledInput {
const = useState;return (
<>
Controlled Input
 setValue}
/>
);}
export default ControlledInput;

别看这段代码短，它包含了受控组件的全部精髓。让我们来拆解每一行：

说到第一步先，声明状态容器

const = useState;

value 就是输入框的“真理之源”。话说回来，此刻输入框显示什么不是 DOM 决定。而是这个 value 变量决定。

从接下来来看，将 state 绑定到 input

value={value}

This is crucial step—React 接管了 input 的显示. 无论使用者敲什么键。input 真正显示的内容永远是 {value}.

：通过 onChange 回收控制权

onChange={ => setValue}

每当使用者输入，onChange 触发 → 拿到最新值 → 更新 state → React 重新渲染 → input 显示最新 state。

The full loop looks like:

• User types → onChange fires → setState updates → React re‑renders → input shows new value → repeat.
• This guarantees that **React is single source of truth** for UI.

进阶实战这方面，带即时验证的登录表单

import { useState } from 'react';function LoginForm {
// ──── 第一层状态：表单数据 ────
const = useState({
username: '',password: ''
});// ──── 第二层状态：校验错误 ────
const = useState;// ──── 校验逻辑 ────
const validate = => {
let msg = '';if {
if {
msg = '请输入使用者名';} else if {
msg = '使用者名长度不能小于3位';}
}
if {
if {
msg = '请输入密码';} else if {
msg = '密码长度不能小于6位';}
}
setErrors(prev => ({
...prev,: msg
}));}，// ──── 统一的变更处理 ────
const handleChange = e => {
const { name,value } = e.target;setForm({
...form,: value // 用 name 区分字段
});validate，// 实时校验
};// ──── 派生状态────
const isValid =
form.username &&
form.password &&
errors.username &&
errors.password;// ──── 提交逻辑────
const handleSubmit = e => {
e.preventDefault;if return，console.log;
}，return (



登录

使用者名

{errors.username && (
{errors.username}
)}


密码

{errors.password && (
{errors.password}
)}


登录



);}
export default LoginForm;说起来，

LoginForm 的设计精要

• 🎯 要点一：对象式 state 管理多个字段

  const = useState;说起来，

  使用一个对象而不是多个独立的 `useState` 能让表单字段集中管理。后续 更易维护，
• 🎯 要点二：利用 Name属性 + 单一 handler

  
  const handleChange = e => {
  const { name,value } = e.target;setForm)，validate;}，

  确保每个 `` 与 `form` 对象键名保持一致，这样一个 handler 就能覆盖所有字段。
• 🎯 要点三：即时校验 校验函数基于字段名维度。仅更新对应错误信息，实现「打字即反馈」体验，这是非受控方案难以做到的。不过，
• 🎯 要点四：派生状态控制按钮 `isValid` 并不是独立 state。而是从 `form` 与 `errors` 派生出来避免冗余同步导致 bug。
• 🎯 要点五：错误状态独立管理 `errors` 与 `form` 分离。使职责清晰——一个存数据，一个存错误信息。

受控组件的数据流全景图

阶段一： 使用者敲 “a” → `handleChange` 更新 `form.username='a'` → `validate` 返回错误信息 → `errors.username` 被设置 → `isValid=false` → 错误提示出现、按钮禁用。

阶段二： 使用者继续敲至 “abc” → 同步更新 `form.username='abc'` → 校验通过清空错误 → `isValid=true` → 错误消失、按钮可点。

---

三、非受控组件

说到基础示例，把控制权还给 DOM

import { useRef } from 'react';function UncontrolledInput {
const inputRef = useRef;const handleClick = => {
console.log;// 按需读取 DOM 值
};其实，return (
<>
Uncontrolled Input

提交
);}
export default UncontrolledInput;老实说，

和受控组件关键差异对照：

} } }

	受控组件 ✅	非受控组件 ❌
是否使用 有 - 绑定到 state	无 - 直接由 DOM 管理
是否提供 有 - 更新 state	无 - 不需要
读取方式 直接读 state	通过 ref.current.value 按需读取
渲染触发 每次输入都会触发重新渲染	仅在显式读取时才涉及 DOM。无额外渲染 }	实时校验支持 ✅ 天然支持	❌ 必须等提交时手动校验 }	代码量 稍多，需要 state+handler+binding	更少，仅需 ref+一次读取 }	与 React 哲学契合度 ✅ 比较符合 UI=state 的理念	⚠️ 偏向传统 DOM 操作，需要谨慎混用 } \end{tbody} \end{table> useRef 在非受��件中的角色 javascript const inputRef=useRef;// . 创建引用容器 // . 挂载后DOM节点放入ref.current // . 随时可以 read latest dom **注意** ：ref.current 改变不会触发重新渲染，这正是非受��件与��管件最根本区别——**数据流只在 DOM 内部**。 实践案例——评论输入框 javascript import { useRef } from 'react';function CommentBox{ const textareaRef=useRef;const handleSubmit==>{ const comment=textareaRef.current.value;if{ alert，return;} console.log;// textareaRef.current.value='';// 如需清空手动操作 };return(<> <button onclick="{handleSubmit}">提交<\/button> <\/>);} export default CommentBox;**为什么这里适合用非受管件？** 1️⃣ **一次性提交**——不需要实时校验或 UI 联动。2️⃣ **性能优势**——长文本输入不会触发大量 re‑render。</button>

"本质区别": 数据到底是在 /state  还是 /DOM 。

"Controlled 三要素": + +

"Uncontrolled 主要": + 按需读取 /ref.current.value 

"何时选 Controlled": 即时校验、UI 联动、多步骤流程

"何时选 Uncontrolled": 简单提交、文件上传、不关心中间过程

"工程化建议": 使用 Barrel Export 管理大量表单/输入型组件，让导入方法统一、一目了然

<\/ul>

---