react受控组件和非受控组件（此外也称约束组件）

秃头的小毛驴2024-03-04 14:37

React 中的受控组件和非受控组件是指表单元素（如 input、textarea、select 等）的两种不同管理方式。它们之间的主要区别在于状态的管理方式。

受控组件（Controlled Components）：

1、受控组件通过 React 组件的状态（state）来管理表单元素的值。

2、当用户与表单元素交互时，触发事件（如 onChange），更新 React 组件的状态，进而更新表单元素的值。

3、通过 React 组件的状态来控制表单元素的值，从而实现数据的双向绑定。

javascript 复制代码

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

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

return (
  <input type="text" value={value} onChange={handleChange} />
);

非受控组件（Uncontrolled Components）：

1、非受控组件中，表单元素的值由 DOM 元素本身来管理，而不受 React 组件的状态控制。

2、通常通过 ref 来获取表单元素的值，而不需要通过 React 组件的状态来管理。

3、开发者需要手动处理表单元素的值，无法利用 React 的状态自动管理表单元素的值。

javascript 复制代码

const inputRef = useRef(null);

const handleClick = () => {
  const value = inputRef.current.value;
  // 处理表单元素的值
};

return (
  <input type="text" ref={inputRef} />
  <button onClick={handleClick}>Submit</button>
);

选择使用受控组件还是非受控组件取决于具体的需求和开发场景。通常情况下，推荐使用受控组件，因为它更符合 React 的单向数据流模型，便于状态管理和数据流控制。但在一些特定情况下，非受控组件也可以提供更简洁的解决方案。