Products
96SEO 2026-06-16 02:31 16
哎呀，聊起 React 的表单，你肯定也跟我一样，脑子里时不时冒出“受控”和“非受控”这俩词儿吧。
说实话，这俩概念听起来挺高大上，实际上就是两种写法的差别。
咱们先把概念拆开来聊一遍，顺便插几句八卦，免得你kan着干巴巴的文档睡着。
受控组件到底是个啥子？受控组件就是状态全程由 React 控制的表单元素。
比如一个普通的输入框，你在 JSX 里写了 value={name}，然后给它绑了 onChange，每次键盘敲进去，dou要走一遍 state geng新再渲染回来。
哈哈，这么Zuo的好处是 UI 永远和数据同步，调试也Neng直接在 React DevTools kan到Zui新值。
代码示例：
function ControlledInput {
const = useState;
return (
setName}
/>
);
}
不对不对，我刚才说的是“每次键盘敲进去，dou要走一遍 state geng新”，其实还有一种情况是你直接把 defaultValue 用错了那就不是受控啦。
非受控组件嘛，就是让浏览器自己管自己的内部状态，不让 React 干涉太多。
Zui常见的写法就是不给 value 加绑定，用 defaultValue/defaultChecked 初始化，然后通过 ref 去读取Zui新值。
代码示例：
function UncontrolledInput {
const inputRef = useRef;
const handleSubmit = => {
alert;
};
return (
<>
);
}
这个时候页面上显示的文字和 React 的 state 完全没关系——只要用户改动，它自己就会geng新。呵呵，这种方式在文件上传或者接入老旧插件时特别省事。
两者到底有什么区别？A）数据流向不同：
受控：UI ← state → UI。单向数据流，所有变化dou必须走 setState。
非受控：DOM ← 用户 → ref。这里有点命令式味道，React 不知道内部到底怎么变了。
B）代码可读性：
用受控的，你Ke以在任何地方打印 {JSON.stringify}, 一眼就知道当前表单值；非受控的话，你得记得哪个 ref 对应哪个字段，一不小心就忘记了。
C）性Neng差异：
- 对于几百个字段的小表单，受控完全够用；React 的 diff 算法hen快，根本感知不到卡顿。
- 对于几千甚至上万字符的大文本编辑器，每次敲键dou会触发一次 state geng新，那可真是慢得要命。此时用非受控配合
