第二节：React 基础篇-受控组件 vs 非受控组件

一、场景题：设计一个实时搜索输入框，说明选择依据

受控组件 vs 非受控组件

核心区别

特征	受控组件	非受控组件
数据管理	由React状态（state）控制	通过DOM元素（ref）直接访问
更新时机	每次输入触发onChange	提交时通过ref获取值
实时性	即时响应输入	延迟获取最终值
典型场景	需实时验证/反馈的输入	表单提交后处理

---

实时搜索输入框设计

场景需求

• 用户输入时立即触发搜索请求（需防抖优化）
• 输入内容需要动态高亮匹配结果
• 支持清空输入后重置搜索结果

方案选择：受控组件

代码实现：

import { useState, useEffect } from 'react';function SearchInput() {const [query, setQuery] = useState('');const [results, setResults] = useState([]);// 防抖处理（300ms延迟）useEffect(() => {const handler = setTimeout(() => {if (query) {fetchResults(query).then(setResults);} else {setResults([]);}}, 300);return () => clearTimeout(handler);}, [query]);return (<div><inputtype="text"value={query}onChange={(e) => setQuery(e.target.value)}placeholder="Search..."/><ul>{results.map((result) => (<li key={result.id}>{result.text}</li>))}</ul></div>);
}

选择依据

1. 实时反馈需求：
   • 输入内容需要立即触发搜索逻辑（防抖优化避免频繁请求）。
   • 受控组件的onChange可精准捕获每次输入变化，适合高频交互。

2. 状态同步性：
   • 搜索结果的渲染依赖当前输入值（如query清空时需同步清空结果）。
   • 受控组件通过useState保证UI与状态严格同步。

3. React 18优化：
   • 自动批处理（Automatic Batching）合并多次setQuery导致的渲染，减少性能损耗。
   • useTransition可标记搜索为低优先级更新，避免输入卡顿。

---

为何不选非受控组件？

1. 延迟问题：
   • 非受控组件需通过ref.current.value手动获取值，无法实时响应输入变化。

2. 防抖实现复杂：
   • 需自行监听input事件并添加定时器，代码冗余易出错。

3. 状态追溯困难：
   • 清空输入框时需手动操作DOM（如ref.current.value = ""），违背React数据流原则。

---

总结

• 优先受控组件：实时交互、状态依赖型场景（搜索、表单验证）。
• 选非受控组件：仅需最终结果的文件上传、大型表单性能优化（如1000+字段）。
• React 18+优化：利用useDeferredValue进一步降低高频输入的性能开销：

const deferredQuery = useDeferredValue(query); // 延迟更新派生值

二、场景：自己实现一个非受控组件的案例

以下是一个简单的非受控组件实现案例，通过 ref 直接访问输入框的值：

import { useRef } from 'react';function UncontrolledInput() {// 1. 创建ref引用const inputRef = useRef(null);// 2. 提交时获取值const handleSubmit = (e) => {e.preventDefault();alert("输入的值: " + inputRef.current.value);inputRef.current.value = ""; // 直接操作DOM清空输入};return (<form onSubmit={handleSubmit}><input type="text" ref={inputRef}  // 3. ref绑定到inputplaceholder="非受控输入" /><button type="submit">提交</button></form>);
}

核心特点：

1. 直接DOM操作：通过 inputRef.current.value 直接读写输入框值
2. 无状态管理：无需 useState 控制输入内容
3. 适用场景：表单提交后只需最终值，无需实时验证或中间状态

对比受控组件优势：

• 更少渲染：输入过程不会触发组件重渲染
• 代码更简：适合简单表单（如一次性文件上传）