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

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

受控组件（Controlled Components）：

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

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

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

const [value, setValue] = useState('');const handleChange = (event) => {setValue(event.target.value);};return ();

非受控组件（Uncontrolled Components）：

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

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

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

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

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