React 入门指南：受控组件与非受控组件

前端

2023-12-14 21:10:27

受控组件与非受控组件是 React 中处理表单输入的两种不同方式。

受控组件 ：受控组件的值由 React 状态管理。这意味着 React 组件负责跟踪输入的值，并在值发生变化时更新状态。
非受控组件 ：非受控组件的值由 DOM 管理。这意味着输入的值存储在 DOM 中，而不是 React 状态中。React 组件可以通过 ref 属性来访问非受控组件的值。

受控组件的优点 ：

更加容易维护：由于受控组件的值由 React 状态管理，因此更容易维护表单的状态。
更好的错误处理：受控组件可以轻松地进行错误处理，因为 React 组件可以跟踪输入的值，并根据需要显示错误消息。
更容易测试：受控组件更容易测试，因为 React 组件可以轻松地模拟输入的值，并检查组件的输出。

非受控组件的优点 ：

性能更好：非受控组件的性能通常比受控组件更好，因为 React 不需要跟踪输入的值。
更简单的代码：非受控组件的代码通常比受控组件更简单，因为 React 不需要维护输入的值。
更容易集成第三方库：非受控组件更容易与第三方库集成，因为第三方库不需要知道 React 组件的状态。

如何选择合适的组件类型 ：

选择合适的组件类型取决于您的具体需求。如果您需要更好的错误处理或更简单的测试，那么受控组件可能是一个更好的选择。如果您需要更好的性能或更简单的代码，那么非受控组件可能是一个更好的选择。

示例代码 ：

以下是一个受控组件的示例代码：

class ControlledComponent extends React.Component {
  state = {
    value: ''
  };

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

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

以下是一个非受控组件的示例代码：

class UncontrolledComponent extends React.Component {
  handleChange = (event) => {
    console.log(event.target.value);
  };

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