React 表单到底怎么玩？受控还是非受控？

yyt_
128 阅读4分钟

受控组件与非受控组件详解：React 表单处理的核心机制

在 React 开发中，表单处理是构建交互式应用的重要组成部分。而在表单元素的管理方式上，受控组件（Controlled Components） 和 非受控组件（Uncontrolled Components） 是两种核心模式。理解它们的区别、适用场景以及使用方法，对于写出高效、可维护的 React 应用至关重要。 本文将从基本概念出发，深入解析受控组件与非受控组件的工作原理，并结合实际代码示例和最佳实践建议，帮助你掌握这两种表单处理方式。

一、什么是受控组件？

受控组件是指其值由 React 组件的状态（state）控制的表单元素。换句话说，表单元素的值始终映射到 React 的状态中，用户输入的变化会实时更新状态，从而实现数据与视图的同步。

核心特点：

  1. 依赖 React 状态（state） 表单元素的 value 属性绑定到 state。
  2. 必须使用 onChange 事件 每次用户输入都会触发 onChange 来更新 state。
  3. 双向绑定效果 输入框的值改变会影响 state，state 改变也会影响输入框显示。
  4. 适合做校验、联动等逻辑 因为所有数据都在 state 中，便于统一管理和验证。
import React, { useState } from 'react';

function ControlledInput() {
  const [value, setValue] = useState('');

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return (
    <div>
      <input type="text" value={value} onChange={handleChange} />
      <p>当前输入内容：{value}</p>
    </div>
  );
}

image.png

在这个例子中，<input> 的值由 value 这个 state 完全掌控，用户每输入一个字符都会触发 onChange 更新状态，页面上的内容也会随之更新，这就是我们常说的受控组件。

二、什么是非受控组件？

非受控组件是指其值不由 React 管理，而是由 DOM 自身管理的表单元素。React 不主动追踪其值，而是通过 ref 在需要时直接访问 DOM 元素获取值。

核心特点：

  1. 不绑定 value 和 onChange 表单元素自己维护值，React 不干涉。
  2. 使用 ref 获取 DOM 值 使用 useRef 或 createRef 创建引用，读取最终值。
  3. 更像传统的 HTML 表单方式 更加原始、简单，但缺乏灵活性。
  4. 适合一次性获取数据（如提交时） 如文件上传、搜索框等不需要频繁交互的场景。
import React, { useRef } from 'react';

function UncontrolledInput() {
  const inputRef = useRef();

  const handleSubmit = () => {
    alert('输入值：' + inputRef.current.value);
  };

  return (
    <>
      <input type="text" ref={inputRef} />
      <button onClick={handleSubmit}>提交</button>
    </>
  );
}

image.png

image.png

在这个例子中，我们没有使用 value 和 onChange，而是通过 ref 获取输入框的值，这种只在提交时获取数据的方式，就是典型的非受控组件。

三、什么时候使用受控组件？什么时候使用非受控组件？

✅ 推荐使用 受控组件 的情况：

  • 需要进行表单验证（如用户名长度、密码强度等）。
  • 多个表单元素之间存在联动逻辑（比如选择一个选项影响另一个字段）。
  • 希望对用户输入进行实时处理（例如格式化、过滤等）。
  • 需要统一管理多个表单的状态（例如 Formik、React Hook Form 等库的基础）。

✅ 推荐使用 非受控组件 的情况：

  • 表单逻辑简单，无需复杂验证。
  • 性能敏感场景（避免频繁的 state 更新）。
  • 快速开发原型或内部工具。
  • 需要与原生 DOM API 深度交互（如文件上传、富文本编辑器等）。

四、最佳实践建议

  1. ✅ 优先使用受控组件
    React 官方推荐使用受控组件，因为它提供了更好的可预测性和可测试性。
  2. ⚠️ 非受控组件仅在必要时使用
    如果你的表单逻辑简单、或者只想快速获取值而不关心中间状态，可以考虑使用非受控组件。
  3. 💡 结合表单管理库提升效率
    对于大型项目，推荐使用 react-hook-form 或 formik 等库，它们基于受控组件理念，但封装了大量重复代码，极大提升了开发效率。
  4. 🧠 注意组件类型差异
    类组件使用 this.state 和 this.refs，函数组件使用 useState 和 useRef，避免混用造成混乱。

五、结语

无论是受控组件还是非受控组件，都是 React 表单处理中的重要工具。选择哪种方式取决于具体业务需求、开发习惯以及对数据流的控制要求。

在大多数现代 React 项目中，受控组件是首选方案，它能提供更强的数据控制能力和更清晰的数据流向；而非受控组件则更适合一些简单的、不涉及复杂交互的场景。

avatar
文章
阅读
粉丝