JS非受控组件用法及ref详解

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《JS非受控组件怎么用？ref详解》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

非受控组件指表单元素值由DOM自身管理，不通过value/onChange交由React控制；用useRef创建ref绑定元素，以defaultValue/defaultChecked设初始值，通过ref.current.value读写值，适用于文件上传、需调用原生方法等场景。

非受控组件在 React 中指表单元素的值由 DOM 自身管理，而不是通过 value 和 onChange 交由 React 状态控制。实现它主要靠 ref 获取 DOM 节点，再手动读写值。

非受控组件怎么写

给表单元素（如 <input>、<textarea>、<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 行为强耦合的需求，比如文件上传、富文本编辑器、第三方库集成等。

• 表单字段极少更新，且不需要实时响应（如一次性提交的搜索框）
• 需要调用原生方法：.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

基本上就这些。非受控组件不复杂但容易忽略细节，用对场景才真正省事。

以上就是《JS非受控组件用法及ref详解》的详细内容，更多关于的资料请关注golang学习网公众号！