当前位置：首页 > news >正文

非受控组件在React中的使用场景有哪些？

news 来源：原创 2025/5/17 7:16:56

在 React 中，非受控组件通过 ref 直接操作 DOM 元素获取值，状态由 DOM 自身管理。以下是其典型使用场景及示例，帮助理解何时选择非受控模式：

一、简单表单或一次性提交场景

场景特点

表单逻辑简单，无需实时监听输入变化，仅需在提交时获取数据。
适合 “输入 → 提交” 的单向流程，避免为简单需求引入额外的状态管理成本。

典型示例

登录 / 注册表单（非实时验证）

const handleSubmit = (e) => {e.preventDefault();// 通过 ref 直接获取 DOM 值const username = usernameRef.current.value;const password = passwordRef.current.value;// 提交逻辑（如调用 API）
};const usernameRef = useRef();
const passwordRef = useRef();<form onSubmit={handleSubmit}><inputref={usernameRef}type="text"placeholder="用户名"defaultValue="游客" // 非受控组件通过 defaultValue 设定初始值/><inputref={passwordRef}type="password"placeholder="密码"/><button type="submit">登录</button>
</form>

优势：无需为每个输入框绑定 onChange 和状态，代码更简洁。

评论提交框
用户输入完成后点击 “发布” 按钮一次性获取内容，无需实时校验或联动。

二、与第三方 DOM 库或原生组件集成

场景特点

组件依赖原生 DOM 操作（如文件选择、富文本编辑器），无法通过 React 的 value 属性控制。
需要直接调用第三方库的 API（如获取编辑器实例、触发文件选择对话框）。

典型示例

文件上传组件（<input type="file" />）

const fileInputRef = useRef();const handleFileSelect = () => {fileInputRef.current.click(); // 触发原生文件选择对话框
};const handleFileChange = (e) => {const file = e.target.files[0]; // 直接通过 DOM 事件获取文件// 上传文件逻辑
};<inputref={fileInputRef}type="file"accept="image/*"onChange={handleFileChange}style={{ display: 'none' }} // 隐藏原生输入框，通过按钮触发
/>
<button onClick={handleFileSelect}>选择图片</button>

关键原因：文件输入框的 value 属性为只读，必须通过 DOM 事件 (onChange) 和 ref 操作。

富文本编辑器（如 Draft.js、Slate.js）

const editorRef = useRef();useEffect(() => {// 初始化第三方编辑器实例const editor = Editor.create(editorRef.current);return () => editor.destroy(); // 清理实例
}, []);<div ref={editorRef}></div>

关键原因：编辑器需要直接操作 DOM 元素进行渲染和交互，无法通过 React 状态同步内容。

三、性能敏感的大规模表单

场景特点

包含大量输入字段（如 hundreds of inputs），频繁的状态更新会导致性能开销（如 setState 触发重渲染）。
只需在特定时机（如提交、滚动加载）获取数据，无需实时响应输入。

典型示例

大数据录入表格

const rows = Array.from({ length: 1000 }, (_, index) => index + 1); // 模拟 1000 行数据
const inputRefs = useRef(rows.map(() => createRef())); // 存储所有输入框的 refconst handleSave = () => {const data = rows.map((_, index) => {return {id: index + 1,value: inputRefs.current[index]?.current?.value || ''};});// 批量保存数据（如调用 API）
};<table><tbody>{rows.map((rowIndex) => (<tr key={rowIndex}><td>行 {rowIndex}</td><td><inputref={inputRefs.current[rowIndex]}type="text"placeholder="输入内容"/></td></tr>))}</tbody>
</table>
<button onClick={handleSave}>保存所有数据</button>

优势：避免为每个输入框创建状态，减少 setState 调用和重渲染次数，提升渲染性能。

虚拟滚动列表中的输入框
仅对可见区域的输入框建立 ref 关联，进一步优化内存占用。

四、兼容性需求或传统项目迁移

场景特点

需要兼容不支持 React 状态管理的旧代码（如 jQuery 插件、原生 JavaScript 逻辑）。
快速迁移传统 HTML 表单，保留原生开发模式。

典型示例

混合使用 React 与 jQuery 的项目

const inputRef = useRef();useEffect(() => {// 使用 jQuery 操作 DOM（非受控模式更便捷）$(inputRef.current).datepicker(); // 初始化日期选择插件
}, []);<input ref={inputRef} type="text" placeholder="选择日期" />

优势：直接通过 ref 获取 DOM 元素，避免与 React 状态系统冲突。

快速原型开发
临时需求中，直接操作 DOM 比搭建受控状态更高效，例如：
```
<input ref={(el) => { el?.focus(); }} /> {/* 组件挂载时自动聚焦 */}
```

五、其他特殊场景

只读或静态表单
无需用户交互的展示型表单，通过 ref 实现滚动定位、打印等辅助功能，而非状态管理。

const sectionRef = useRef();
<button onClick={() => sectionRef.current.scrollIntoView()}>滚动到表单</button>
<div ref={sectionRef}>只读表单内容</div>

需要直接操作 DOM 特性的场景
例如动态设置输入框的 disabled、readonly 属性，或获取原生 DOM 方法（如 select() 选中文本）。

const inputRef = useRef();
<button onClick={() => inputRef.current.select()}>全选文本</button>
<input ref={inputRef} type="text" value="Hello World" />

总结：何时选择非受控组件？

场景类型	核心特征	示例
简单表单	仅需提交时获取数据，无实时交互	登录表单、评论框
第三方库集成	依赖原生 DOM 操作或第三方 API	文件上传、富文本编辑器
大规模表单	输入字段多，性能敏感	大数据录入表格、虚拟列表
兼容性 / 迁移需求	混合旧代码或快速复用原生逻辑	React + jQuery 项目、传统表单迁移
特殊 DOM 操作	需要直接调用 DOM 方法或设置特性	自动聚焦、滚动定位、文本选择