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

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

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

场景特点

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

典型示例

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

javascript 复制代码

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}>
  <input
    ref={usernameRef}
    type="text"
    placeholder="用户名"
    defaultValue="游客" // 非受控组件通过 defaultValue 设定初始值
  />
  <input
    ref={passwordRef}
    type="password"
    placeholder="密码"
  />
  <button type="submit">登录</button>
</form>

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

评论提交框

用户输入完成后点击 "发布" 按钮一次性获取内容，无需实时校验或联动。

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

场景特点

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

典型示例

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

javascript 复制代码

const fileInputRef = useRef();

const handleFileSelect = () => {
  fileInputRef.current.click(); // 触发原生文件选择对话框
};

const handleFileChange = (e) => {
  const file = e.target.files[0]; // 直接通过 DOM 事件获取文件
  // 上传文件逻辑
};

<input
  ref={fileInputRef}
  type="file"
  accept="image/*"
  onChange={handleFileChange}
  style={{ display: 'none' }} // 隐藏原生输入框，通过按钮触发
/>
<button onClick={handleFileSelect}>选择图片</button>

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

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

javascript 复制代码

const editorRef = useRef();

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

<div ref={editorRef}></div>

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

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

场景特点

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

典型示例

大数据录入表格

javascript 复制代码

const rows = Array.from({ length: 1000 }, (_, index) => index + 1); // 模拟 1000 行数据
const inputRefs = useRef(rows.map(() => createRef())); // 存储所有输入框的 ref

const 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>
          <input
            ref={inputRefs.current[rowIndex]}
            type="text"
            placeholder="输入内容"
          />
        </td>
      </tr>
    ))}
  </tbody>
</table>
<button onClick={handleSave}>保存所有数据</button>

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

虚拟滚动列表中的输入框

仅对可见区域的输入框建立 ref 关联，进一步优化内存占用。

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

场景特点

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

典型示例

混合使用 React 与 jQuery 的项目

javascript 复制代码

const inputRef = useRef();

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

<input ref={inputRef} type="text" placeholder="选择日期" />

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

快速原型开发

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

五、其他特殊场景

只读或静态表单

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

javascript 复制代码

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

需要直接操作 DOM 特性的场景

例如动态设置输入框的 disabled、readonly 属性，或获取原生 DOM 方法（如 select() 选中文本）。
javascript 复制代码
```
const inputRef = useRef();
<button onClick={() => inputRef.current.select()}>全选文本</button>
<input ref={inputRef} type="text" value="Hello World" />
```

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

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

注意事项：

非受控组件的状态存储在 DOM 中，可能导致数据 "隐性化"，调试时需注意 DOM 与 React 状态的一致性。
避免在需要实时验证、动态联动或全局状态同步的场景中使用非受控组件，以免增加维护成本。