非受控组件指表单元素值由DOM自身管理，不通过value/onChange交由React控制；用useRef创建ref绑定元素，以defaultValue/defaultChecked设初始值，通过ref.current.value读写值，适用于文件上传、需调用原生方法等场景。
非受控组件在 React 中指表单元素的值由 DOM 自身管理，而不是通过 value 和 onChange 交由 React 状态控制。实现它主要靠 ref 获取 DOM 节点，再手动读写值。
非受控组件怎么写
给表单元素（如 <input>、<textarea></textarea>、<select></select>）不设 value 属性，也不绑定 onChange；用 useRef 创建 ref，再通过 ref.current.value 读取或设置值。
- 初始值用
defaultValue（输入框）或defaultChecked（复选/单选），不是value - 提交时通过
ref.current.value拿当前值，而不是从 state 里取 - 需要动态设置值时，用
ref.current.value = 'xxx'（注意：这会绕过 React 渲染，不触发重绘）
ref 怎么正确创建和使用
函数组件中必须用 useRef Hook 创建 ref 对象，它的 .current 属性可读可写，且在整个组件生命周期内保持同一个引用。
- 写法：
const inputRef = useRef(null) - 绑定到元素：
<input ref="{inputRef}" defaultvalue="hello"> - 获取值：
inputRef.current.value（确保 ref 已挂载，比如在事件回调或 useEffect 里用） - 聚焦示例：
inputRef.current.focus()，适合表单校验失败后自动聚焦
什么时候该用非受控组件
它适合简单场景或与原生 DOM 行为强耦合的需求，比如文件上传、富文本编辑器、第三方库集成等。
立即学习“Java免费学习笔记（深入）”；
- 表单字段极少更新，且不需要实时响应（如一次性提交的搜索框）
- 需要调用原生方法：
.focus()、.select()、.setRangeText() - 避免因频繁 setState 导致的性能开销（但多数情况影响极小，别过早优化）
- 与未适配 React 的老代码或插件共存时更自然
注意事项和常见坑
非受控组件一旦渲染，就不能再切回受控（即不能中途加 value），否则会报错 “A component is changing an uncontrolled input to be controlled”。反之亦然。
- 不要混用
value和ref控制同一个输入框 -
defaultValue只在首次渲染生效，后续 props 变化不会更新输入框值 - 服务端渲染（SSR）下，
defaultValue可能和 HTML 初始值不一致，需注意 hydration 差异 - 测试时需模拟用户交互（如 fireEvent.change），而非直接改
ref.current.value
基本上就这些。非受控组件不复杂但容易忽略细节，用对场景才真正省事。
