约束性组件（ controlled component）与非约束性组件（ uncontrolled component）

约束性组件（Controlled Component）和非约束性组件（Uncontrolled Component）是在React中常用的两种表单组件的设计模式。

约束性组件是指其值受React组件的状态（state）控制的组件。在约束性组件中，表单元素的值由React组件的状态维护，并通过onChange事件处理函数更新状态。每当用户输入发生变化时，状态会被更新，从而保持组件的值与状态的同步。这种模式使得React组件完全控制表单的值和行为。

class ControlledComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ''
    };
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  render() {
    return (
      <input
        type="text"
        value={this.state.value}
        onChange={this.handleChange.bind(this)}
      />
    );
  }
}

非约束性组件是指其值不受React组件状态控制的组件。在非约束性组件中，表单元素的值由DOM自身维护，React组件可以通过ref属性获取表单元素的值。这种模式更接近传统的HTML表单处理方式，但在处理复杂表单逻辑时可能需要额外的操作。

class UncontrolledComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  handleClick() {
    const value = this.inputRef.current.value;
    // 处理表单值
  }

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

总的来说，约束性组件提供了更精确的控制和验证，适用于复杂的表单逻辑。非约束性组件则更简洁，适用于简单的表单场景。开发者可以根据具体需求选择适合的模式。