受控组件和非受控组件

受控组件 = React当老板

输入框的值完全由React state控制，必须配套：有value就必须有onChange 实时同步：每打一个字，state就更新，组件就重新渲染

受控组件：React控制一切

const [text, setText] = useState('');
<input
value={text}                           // React说：你的值是这个
onChange={(e) => setText(e.target.value)} // 用户输入时，React更新state
/>

非受控组件 = DOM当老板

DOM说了算，输入框的值由浏览器DOM管理，React只是看客，需要的时候通过ref去DOM那里要值 懒得管理，React不关心你输入什么，需要时才去看

const inputRef = useRef();
<input
ref={inputRef}                    // 给input一个引用
defaultValue="初始值"              // 只设置初始值，之后DOM自己管
/>

总结

1. 受控 = value + onChange（缺一不可）

2. 非受控 = ref + defaultValue（要值时去DOM要）

3. file类型永远非受控（文件只能通过DOM获取）

什么时候用哪个？

1. 需要实时验证 → 用受控（比如密码长度检查）

2. 简单表单提交 → 用非受控（比如登录表单）

3. 文件上传 → 必须非受控（file类型限制）