受控与非受控组件区别

Wed, 05 Mar 2025 12:28:17 +0000

二、考察点分析

本题主要考察以下核心能力维度：

React框架机制理解：检验对React数据流控制方式的掌握程度
组件设计能力：评估表单场景下的技术选型判断力
DOM操作认知：区分声明式编程与命令式编程的差异

具体技术评估点：

数据绑定方式（单向vs双向）
状态同步机制（主动更新vs被动获取）
性能优化取舍（重渲染代价vsDOM操作消耗）
表单验证实现路径（实时校验vs提交时校验）
非受控组件Refs使用规范

三、技术解析

关键知识点优先级

数据控制权 > 2. 更新时机 > 3. 访问方式

原理剖析

受控组件通过React state实现数据绑定，形成单向数据流。输入框的value属性完全由React控制，通过onChange事件更新state，触发组件重渲染。这种模式符合React声明式编程范式，保证组件状态与UI的强一致性。

非受控组件则将数据存储在DOM元素自身，通过ref直接访问DOM节点值。使用defaultValue设置初始值，表单数据仅在提交时通过DOM API获取。这种方式更接近传统HTML表单行为，适合集成非React代码。

 // 受控组件实现
function ControlledForm() {
 const [value, setValue] = useState('');
 
 return <input 
 value={value} 
 onChange={(e) => setValue(e.target.value)}
 />;
}

// 非受控组件实现
function UncontrolledForm() {
 const inputRef = useRef(null);
 
 const handleSubmit = () => {
 console.log(inputRef.current.value);
 };

 return <input 
 defaultValue="" 
 ref={inputRef} 
 />;
}

常见误区

混淆defaultValue与value的用途
在受控组件中使用ref.value直接修改DOM
高频输入场景未做防抖导致性能问题

四、问题解答

核心区别在于数据控制权归属：

状态绑定 on ZiYang FrontEnd Interview

受控与非受控组件区别

二、考察点分析 link

三、技术解析 link

关键知识点优先级 link

原理剖析 link