受控组件与非受控组件

受控组件

受控组件是指表单元素由 React 状态管理（props 或 state），并通过事件处理函数（如 onChange）来更新状态。

受控组件-代码示例

import { useState } from 'react';

const controlledComponent = () => {
  const [name, setName] = useState('');
  const handleChange = (event) => {
    setName(event.target.value);
  }
  return (
    <>
      <input
        type="text" 
        value={name} 
        onChange={handleChange}
      />
      <p>Name: {name}</p>
    </>
  )
}

非受控组件

非受控组件是指表单元素由 DOM 状态管理，并通过 ref 来获取值。

非受控组件-代码示例

import { useRef } from 'react';

const uncontrolledComponent = () => {
  const inputRef = useRef(null);
  const handleSubmit = () => {
    console.log(inputRef.current.value);
  }
  return (
    <>
      <input type="text" ref={inputRef} />
      <button onClick={handleSubmit}> submit </button>
    </>
  )
}

受控组件 vs 非受控组件

特性	受控组件	非受控组件
数据管理	由 React 状态管理	由 DOM 状态管理
获取数据	value属性 + onChange 事件	refs 获取
初始值数据	通过 state 属性初始化	defaultValue/defaultChecked
实时验证	✅ 实时同步	❌ 提交时才获取
性能	可能比较低（频繁渲染）	较高
适用场景	复杂表单需要实时交互	简单表单、文件上传、性能敏感场景