HoRain云--React受控与非受控组件终极对比

### React 中受控组件与非受控组件的区别及使用场景 #### 受控组件 (Controlled Components) 在 React 中，当表单元素的状态由 React 的状态管理时，这些组件被称为 **受控组件**。这意味着所有的表单数据都存储在 React 组件的状态中，并通过 `props` 或回调函数来更新。 - 表单元素的值始终由 React 状态控制。 - 需要显式地处理每次用户输入事件并更新状态。 - 更适合复杂的交互逻辑和动态验证场景。 以下是创建受控组件的一个简单例子： ```javascript class ControlledForm extends React.Component { constructor(props) { super(props); this.state = { value: '' }; } handleChange = (event) => { this.setState({ value: event.target.value }); }; handleSubmit = (event) => { alert('提交的内容: ' + this.state.value); event.preventDefault(); }; render() { return ( <form onSubmit={this.handleSubmit}> <label> 名字: <input type="text" value={this.state.value} onChange={this.handleChange} /> </label> <input type="submit" value="提交" /> </form> ); } } ``` 这种模式允许开发者完全掌控表单的行为及其状态变化[^4]。 --- #### 非受控组件 (Uncontrolled Components) 相比之下，**非受控组件**更接近于原生 HTML 的行为方式。在这种情况下，React 不会维护表单元素的状态，而是让 DOM 自己保存其当前值。 - 使用 `ref` 来获取 DOM 节点中的实际值。 - 对简单的表单或者不需要频繁更新的应用程序来说更为简洁高效。 下面是一个典型的非受控组件实现方法： ```javascript class UncontrolledForm extends React.Component { constructor(props) { super(props); this.inputRef = React.createRef(); // 创建 ref 实例 } handleSubmit = (event) => { alert('提交的内容: ' + this.inputRef.current.value); // 访问 input 值 event.preventDefault(); }; render() { return ( <form onSubmit={this.handleSubmit}> <label> 名字: <input type="text" ref={this.inputRef} /> {/* 将 ref 关联到 input */} </label> <input type="submit" value="提交" /> </form> ); } } ``` 这种方式更适合那些只需要读取最终结果而无需实时监听中间过程的情况[^4]。 --- #### 主要区别总结 | 特性 | 受控组件 | 非受控组件 | |--------------------------|-----------------------------------|----------------------------| | 数据源 | React State | DOM | | 更新机制 | 显式的 setState 和事件处理器 | 默认浏览器行为 | | 复杂度 | 较高 | 较低 | | 场景适用 | 动态验证、复杂业务逻辑 | 简单表单或静态页面 | --- #### 使用场景分析 1. 如果应用程序需要对用户的每一次输入做出反应（例如自动完成建议），则应优先考虑采用 **受控组件**。 2. 当仅需收集最终的结果而不关心具体的变化细节时，则可以选用更加轻量级的解决方案——即 **非受控组件**。 尽管如此，在现代开发实践中推荐更多地依赖于受控组件，因为它们能够更好地融入 React 的生态系统并与诸如 Redux 这样的全局状态管理系统集成[^1]。