深入探讨React组件的受控和非受控

1. 受控与非受控组件的概念

在React中，组件分为受控组件和非受控组件。受控组件是指由父组件通过props来控制其内部状态的组件。而非受控组件是指组件内部管理其自身状态，不受父组件的控制。

2. 受控与非受控组件的比较

受控组件和非受控组件的区别主要在于状态管理的方式不同。受控组件的状态是由父组件通过props来控制的，而非受控组件的状态是由组件自身内部来管理的。

受控组件的优点在于，父组件可以更好地控制子组件的状态，确保子组件的状态与父组件的状态保持一致。非受控组件的优点在于，组件自身管理其状态，简化了组件的实现，不需要父组件来管理其状态。

3. 受控与非受控组件的适用场景

受控组件和非受控组件的适用场景不同。受控组件适用于需要父组件来控制子组件状态的情况，例如表单组件。而非受控组件适用于不需要父组件来控制子组件状态的情况，例如按钮组件。

4. 如何编写受控组件和非受控组件

编写受控组件需要在父组件中定义子组件的状态，并在子组件中通过props来获取父组件定义的状态。编写非受控组件需要在组件内部定义其状态，并在组件内部管理其状态。

5. 受控与非受控组件的示例

// 受控组件示例
class ControlledComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: this.props.value
    };
  }

  render() {
    return (
      <input
        value={this.state.value}
        onChange={(e) => {
          this.setState({ value: e.target.value });
        }}
      />
    );
  }
}

// 非受控组件示例
class UncontrolledComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ''
    };
  }

  render() {
    return (
      <input
        ref={(input) => { this.input = input; }}
        value={this.state.value}
        onChange={(e) => {
          this.setState({ value: e.target.value });
        }}
      />
    );
  }
}

6. 总结

受控组件和非受控组件是React中两种不同的组件类型。受控组件由父组件通过props来控制其内部状态，而非受控组件由组件自身内部来管理其状态。受控组件和非受控组件都有各自的优点和适用场景，在实际开发中应根据具体情况来选择使用哪种类型的组件。