约束性组件（ 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 更新和验证机制。