React中什么是受控组件和非控组件？

在React中，表单元素的行为分为两种类型：受控组件（Controlled Components）和非受控组件（Uncontrolled Components）。

受控组件：在受控组件中，表单数据由React组件的state管理。也就是说，表单输入的值会与组件的state同步，每当状态变化时，都会触发一个函数（通常是onChange），然后在该函数中更新状态。这样，React组件就始终控制了输入的状态。

例如，一个简单的受控组件可能是这样的：

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 (
      <form>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

非受控组件：非受控组件则是让表单数据由DOM自身来管理，而不是存储在React组件的state中。通过使用ref来从DOM元素中获取表单值，而不是为每次键盘敲击都编写事件处理程序。

class UncontrolledForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit