学习React-21-受控组件非受控组件

### 受控组件与非受控组件

在 React 中，表单元素（如输入框、下拉菜单）的处理方式分为“受控组件”和“非受控组件”。理解它们的区别有助于优化代码结构和性能。下面我将逐步解释这两个概念、对比特点、分析优缺点，并提供使用建议和代码示例。

概念介绍

• 受控组件：表单元素的值完全由 React 组件的状态（state）控制。每次用户输入时，都会触发状态更新，并通过事件处理函数同步数据。例如，输入框的值绑定到 state，并通过 onChange 事件更新。
• 非受控组件：表单元素的值由 DOM 自身管理（如浏览器的默认行为）。React 通过引用（ref）在需要时（如提交表单）获取数据，而不是实时控制。

核心区别

下表总结了关键差异：

特性	受控组件	非受控组件
数据管理	由 React 状态控制	由 DOM 管理
更新方式	通过 onChange 事件实时更新状态	通过 ref 在特定时机（如提交）获取值
实时性	高（输入时立即响应）	低（仅在需要时访问）
性能影响	可能较高（频繁渲染）	较低（减少渲染次数）
代码复杂度	较高（需事件处理逻辑）	较低（简单 ref 访问）

优缺点分析

• 受控组件优点：

  • 易于实现表单验证、动态反馈（如实时显示输入长度）。
  • 与 React 状态管理无缝集成，支持复杂逻辑（如条件渲染）。

• 受控组件缺点：

  • 可能导致性能问题（每个输入都触发渲染）。
  • 代码量较大（需定义状态和事件处理函数）。

• 非受控组件优点：

  • 性能更优（减少不必要的渲染）。
  • 代码简洁（适合简单表单）。

• 非受控组件缺点：

  • 难以实时控制（如验证需手动触发）。
  • 集成 React 状态时可能出错（如与其他组件状态冲突）。

使用场景建议

• 优先使用受控组件：当需要即时反馈、表单验证或复杂交互时（例如登录表单、动态搜索框）。
• 优先使用非受控组件：当表单简单、性能敏感或需集成非 React 库时（例如文件上传、一次性输入）。

小栗子

以下是一个 React 组件示例，展示两种实现方式。假设我们有一个输入框，用于收集用户名。

受控组件实现：值绑定到 state，通过 onChange 更新。

import React, { useState } from 'react';function ControlledComponent() {const [username, setUsername] = useState(''); // 状态控制值const handleChange = (event) => {setUsername(event.target.value); // 实时更新状态};const handleSubmit = () => {console.log('提交的用户名:', username);};return (<div><inputtype="text"value={username} // 值由 state 提供onChange={handleChange} // 输入时触发更新/><button onClick={handleSubmit}>提交</button></div>);
}

非受控组件实现：使用 ref 在提交时获取值。

import React, { useRef } from 'react';function UncontrolledComponent() {const inputRef = useRef<HTMLInputElement>(null); // 创建 ref 引用const handleSubmit = () => {const username = inputRef.current.value; // 提交时获取 DOM 值console.log('提交的用户名:', username);};return (<div><inputtype="text"ref={inputRef} // 绑定 ref，不控制值defaultValue="" // 初始值（可选）/><button onClick={handleSubmit}>提交</button></div>);
}

---

总结

• 受控组件：适合需要精细控制的场景，但注意性能优化（如使用 useCallback）。
• 非受控组件：适合简单、高性能需求，但避免在复杂逻辑中使用。
  实际开发中，根据需求选择：多数表单推荐受控组件以确保可维护性，非受控组件可作为补充。如果您有具体场景，我可以进一步分析！受控组件&非受控组件