约束性组件（ controlled component）与非约束性组件（ uncontrolled component）有什么区别？
在 React 中，表单元素的数据处理方式可以分为 “约束性组件（Controlled Components）” 和 “非约束性组件（Uncontrolled Components）”。
约束性组件（Controlled Components）：
在约束性组件中，表单数据是由 React 组件管理的。每个表单字段的值都直接链接到组件的 state。当用户输入数据时，会触发一个事件处理器，然后在该事件处理器中更新 state，再由 state 更新输入框的值。
例如：
class ControlledForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
render() {
return (
<input type="text" value={this.state.value} onChange={this.handleChange} />
);
}
}
在这个例子中，<input> 的值由组件的 state 控制，因此这是一个约束性组件。
非约束性组件（Uncontrolled Components）：
在非约束性组件中，表单数据由 DOM 本身管理，React 并不直接操作或控制表单元素。要获取表单数据，需要使用 ref 从 DOM 中获取。
例如：
class UncontrolledForm extends React.Component {
constructor(props) {
super(props);
this.inputRef = React.createRef();
}
handleSubmit = (event) => {
alert('Input value: ' + this.inputRef.current.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<input type="text" ref={this.inputRef} />
<input type="submit" value="Submit" />
</form>
);
}
}
在这个例子中，<input> 的值不由组件的 state 控制，而是通过 ref 从 DOM 中获取，因此这是一个非约束性组件。
总的来说，约束性组件和非约束性组件的主要区别在于谁管理表单数据：约束性组件由 React 管理，非约束性组件由 DOM 管理。在大多数情况下，推荐使用约束性组件，因为这样可以更好地利用 React 的 state 更新和验证机制。