菜鸟教程
教程 react tutorial

受控组件与非受控组件

什么是受控组件？

受控组件是指表单元素的值由 React 的 state 控制。用户输入会触发状态更新，从而重新渲染组件，保持数据一致性。

jsx 
import { useState } from 'react';

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

  return (
    <input
      type="text"
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

`

在这个例子中，input 的值由 value 状态控制，任何用户输入都通过 onChange 修改状态。

什么是非受控组件？

非受控组件使用 ref 直接访问 DOM 元素的值，React 不管理其状态，适用于简单、不需要频繁更新的场景。

jsx 
import { useRef } from 'react';

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

  const handleClick = () => {
    alert(inputRef.current.value);
  };

  return (
    <>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>获取输入值</button>
    </>
  );
}

在这个例子中，输入框的值不会存储在组件状态中，而是通过 ref 直接读取。

选择哪种方式？

对比项 受控组件 非受控组件
数据来源 React state DOM 本身
状态管理 明确、集中 分散、不可追踪
推荐使用场景 表单验证、复杂交互 简单表单、快速开发
可测试性 更易测试 测试复杂

总结

  • 受控组件 提供了更强的控制力和一致性，推荐用于大多数表单。
  • 非受控组件 更接近原生 HTML 表单行为，适合简单的场景。

相关内容