【React】受控组件与非受控组件：状态管理范式、适用场景与决策框架

摘要

React 框架提供了受控组件（Controlled Components）与非受控组件（Uncontrolled Components）两种表单状态管理模式。本文从数据流方向、状态所有权与交互复杂度三个维度，系统比较两种模式的本质差异与技术特征。研究表明，受控组件通过 React state 实现单向数据流，具备实时验证与动态交互能力，是大多数场景下的首选方案；非受控组件通过 DOM 自身管理状态，在简单表单与特定集成场景中具有简洁性优势。本文进一步构建了基于场景特征的决策框架，为开发者在实际工程中的技术选型提供理论依据。

关键词：React；受控组件；非受控组件；单向数据流；状态管理；表单处理；声明式编程

一、引言

在 React 开发实践中，表单元素（如<input>、<textarea>、<select>）的状态管理是一项基础且高频的技术决策。React 框架提供了两种截然不同的处理模式：受控组件与非受控组件。二者的核心分歧在于表单数据的所有权归属——由 React state 集中管理，或者由 DOM 自身维护。理解两种模式的内在机制、优势权衡与适用边界，对于构建可预测、可维护的 React 应用具有关键意义。

二、受控组件：React State 驱动的单向数据流

2.1 概念界定

受控组件中，表单元素的值由 React 组件的 state完全控制。React state 构成表单数据的唯一数据源（Single Source of Truth），形成完整的闭环控制回路。

2.2 工作机制

受控组件的数据流遵循以下五步循环：

1. 状态初始化：组件 state 中存储表单元素的当前值；
2. 值绑定：通过value（或checked，针对复选框/单选按钮）prop 将 state 值传递至表单元素；
3. 交互触发：用户输入触发onChange事件；
4. 状态更新：onChange事件处理器调用setState更新组件 state；
5. 重新渲染：state 变更触发组件重新渲染，表单元素显示更新后的值。

该循环可形式化表达为：

UIinput=f(stateReact)\text{UI}_{\text{input}} = f(\text{state}_{\text{React}})UIinput​=f(stateReact​)

stateReact←onChangeUser Input\text{state}_{\text{React}} \xleftarrow{\text{onChange}} \text{User Input}stateReact​onChange​User Input

2.3 典型实现

importReact,{useState}from'react';functionControlledForm(){const[name,setName]=useState('');consthandleChange=(event)=>{setName(event.target.value);// 实时同步至 state};consthandleSubmit=(event)=>{alert('提交的名字是: '+name);event.preventDefault();};return(<form onSubmit={handleSubmit}><label>名字:<input type="text"value={name}onChange={handleChange}/></label><button type="submit">提交</button></form>);}

上述实现中，<input>的值完全由namestate 驱动。用户输入须经handleChange→setName→ state 更新 → 重新渲染的完整循环，方能在界面上生效。

2.4 技术优势

三、非受控组件：DOM 自身的状态管理

3.1 概念界定

非受控组件中，表单数据由DOM 自身管理，React 不直接控制表单元素的值。开发者通过ref获取对 DOM 节点的直接引用，在特定时机（如表单提交）从 DOM 中"拉取"当前值。

3.2 工作机制

非受控组件的数据流具有以下特征：

• 初始化：通过defaultValue（或defaultChecked）设置表单元素的初始值；
• 运行期：React 不追踪输入变化，DOM 自主维护当前值；
• 取值：通过ref.current.value在需要时读取 DOM 中的最新值。

该模式可形式化表达为：

Valueread=DOMref.value(at time t)\text{Value}_{\text{read}} = \text{DOM}_{\text{ref}}.\text{value} \quad (\text{at time } t)Valueread​=DOMref​.value(at timet)

3.3 典型实现

importReact,{useRef}from'react';functionUncontrolledForm(){constnameInputRef=useRef(null);consthandleSubmit=(event)=>{alert('提交的名字是: '+nameInputRef.current.value);// 从 DOM 读取event.preventDefault();};return(<form onSubmit={handleSubmit}><label>名字:<input type="text"defaultValue="Guest"ref={nameInputRef}/></label><button type="submit">提交</button></form>);}

此处使用useRef创建 DOM 引用，以defaultValue替代value设置初始值。React 不追踪输入变化，仅在handleSubmit触发时通过nameInputRef.current.value读取 DOM 值。

3.4 技术优势

四、对比分析与决策框架

4.1 多维度对比

4.2 决策框架

基于上述分析，本文提出以下技术选型决策框架：

首选受控组件（React 社区普遍推荐的最佳实践）

受控组件符合 React 声明式编程范式，通过 state 驱动 UI，使组件行为更可预测、更易于控制。以下场景强烈建议使用受控组件：

• 需对用户输入进行实时验证或格式化；
• 需根据输入值动态改变其他 UI 元素状态；
• 表单字段间存在依赖关系；
• 需精确控制表单提交前的状态一致性。

非受控组件的适用场景

以下特定场景中，非受控组件可作为有效备选：

• 极简表单：如单一搜索框、登录表单，仅关注提交时的最终值；
• 一次性取值：仅需在特定时刻读取值，无需追踪每次变化；
• 文件输入处理：<input type="file" />的value属性为只读，本质上属于非受控组件，必须通过ref访问选定文件；
• 性能优化：在包含大量输入元素的复杂表单中，若经性能分析确认受控组件的频繁 state 更新引发瓶颈，可考虑采用非受控组件作为优化手段。

五、结论

本文从状态所有权、数据流方向与交互复杂度三个维度，系统比较了 React 受控组件与非受控组件的技术特征：

1. 受控组件将表单数据纳入 React state 管理体系，通过单向数据流实现强大的控制力与可预测性，是大多数场景下的首选方案；
2. 非受控组件将数据管理权交还 DOM，以简洁的实现方式服务于特定场景，是简单表单与特殊需求下的实用备选；
3. 两种模式并非对立关系，而是服务于不同需求的技术选项，理解其内在机制与权衡是做出正确技术决策的前提。

在实际工程实践中，建议优先采用受控组件以契合 React 声明式编程范式，仅在特定场景下审慎引入非受控组件，以平衡开发效率与代码可维护性。

参考文献

[1] React Documentation. Controlled Components. https://react.dev/learn/thinking-in-react
[2] React Documentation. Uncontrolled Components. https://react.dev/learn/sharing-state-between-components
[3] React Documentation. useRef. https://react.dev/reference/react/useRef
[4] React Documentation. Forms. https://react.dev/learn/thinking-in-react
[5] Facebook Open Source. React Source Code. https://github.com/facebook/react