在 React 中,受控组件(Controlled Components) 和 非受控组件(Uncontrolled Components) 是处理表单元素的两种不同方式,它们的核心区别在于 数据管理的方式 和 与 React 的交互模式。
表单元素(如 <input>
、<textarea>
、<select>
)的值由 React
的 state
完全控制。用户输入会触发 React
的状态更新,表单的当前值始终与 React
的 state
同步。
jsximport { useState } from 'react';
function ControlledForm() {
const [inputValue, setInputValue] = useState('');
const handleChange = (e) => {
setInputValue(e.target.value); // 手动同步到 state
};
return (
<input
type="text"
value={inputValue} // 值由 React state 控制
onChange={handleChange}
/>
);
}
表单元素的值由 DOM
自身管理,React
通过 ref
在需要时(如表单提交时)直接读取 DOM
的值。用户输入不会触发 React
的状态更新。
jsximport { useRef } from 'react';
function UncontrolledForm() {
const inputRef = useRef(null);
const handleSubmit = (e) => {
e.preventDefault();
console.log(inputRef.current.value); // 通过 ref 获取 DOM 值
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
ref={inputRef} // 使用 ref 关联 DOM 节点
defaultValue="初始值" // 仅初始化时设置默认值
/>
<button type="submit">提交</button>
</form>
);
}
<input type="file">
必须用非受控组件)。特性 | 受控组件 | 非受控组件 |
---|---|---|
数据管理 | React state 控制 | DOM 自身管理 |
值同步 | 实时同步(onChange 事件) | 手动获取(通过 ref) |
初始值设置 | 通过 value 属性 | 通过 defaultValue 属性 |
表单验证时机 | 输入时实时验证 | 提交时验证 |
代码复杂度 | 较高(需处理事件和状态) | 较低(直接操作 DOM) |
性能 | 可能较低(频繁渲染) | 较高 |
React 哲学匹配度 | 高(符合单向数据流) | 低(依赖 DOM 操作) |
大多数场景推荐使用受控组件,尤其是需要实时交互、验证或动态表单时。
<input type="file">
)。<input type="file">
必须用非受控组件,因为其值只能由用户设置(安全限制)。
非受控组件用 defaultValue
或 defaultChecked
设置初始值(类似原生 HTML
)。
大型表单中避免频繁渲染,可通过防抖(debounce
)或 useCallback
优化事件处理函数。
根据实际需求选择,优先遵循 React
的单向数据流原则,仅在必要时使用非受控组件。
本文作者:CreatorRay
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!