面试题-React(二十)： 受控组件和非受控组件

React是一种流行的JavaScript库，用于构建用户界面。在React中，表单元素（如输入框、复选框、下拉框等）是构建交互式用户界面的重要组成部分。React提供了两种主要的方法来处理表单元素：受控组件（controlled components）和非受控组件（uncontrolled components）。本文将深入探讨这两种方法，介绍它们的概念、特点以及在实际开发中的应用。

一、受控组件(Controlled Components)

受控组件是指表单元素的值受React组件的状态控制的元素。在受控组件中，表单元素的值由React组件的状态属性（state）管理，并通过事件处理函数进行更新。

示例：

import React, { Component } from 'react';

class ControlledInput extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ''
    };
  }

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

  render() {
    return (
      <div>
        <input
          type="text"
          value={this.state.inputValue}
          onChange={this.handleChange}
        />
        <p>Input Value: {this.state.inputValue}</p>
      </div>
    );
  }
}

export default ControlledInput;

在上面的示例中，inputValue是React组件的状态属性，它管理了输入框的值。handleChange事件处理函数在输入框的值发生变化时被调用，更新了inputValue的值。这就是一个受控输入框。

优点：

1. 可预测性： 由React状态管理，可以追踪和控制表单元素的值。

2. 验证和处理逻辑： 可以轻松添加验证和处理逻辑，因为所有的值都在React组件中可见和可控。

3. 状态同步： 表单元素的值与React组件的状态保持同步，使得构建复杂的表单变得更容易。

缺点：

1. 繁琐： 对于大型表单，需要编写大量的状态属性和事件处理函数。

2. 性能： 更新React状态会触发重新渲染，可能对性能产生一些影响。

二、非受控组件(Uncontrolled Components)

非受控组件是指表单元素的值不受React状态控制的元素。在非受控组件中，表单元素的值由DOM本身管理，而不受React的控制。

示例：

import React, { Component } from 'react';

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

  handleButtonClick = () => {
    alert('Input Value: ' + this.inputRef.current.value);
  }

  render() {
    return (
      <div>
        <input type="text" ref={this.inputRef} />
        <button onClick={this.handleButtonClick}>Get Value</button>
      </div>
    );
  }
}

export default UncontrolledInput;

在上面的示例中，我们使用ref属性来引用输入框元素，而不是使用React状态属性。当按钮被点击时，我们通过this.inputRef.current.value来获取输入框的值。这就是一个非受控输入框。

优点：

1. 简洁： 不需要编写大量的状态属性和事件处理函数，代码相对较简洁。

2. 性能： 不会触发React重新渲染，性能较好。

缺点：

1. 可维护性： 难以追踪和管理表单元素的值，特别是在大型表单中。

2. 控制困难： 难以添加验证和处理逻辑，因为值不受React控制。

三、受控组件 vs. 非受控组件

在使用React开发应用程序时，通常会选择受控组件或非受控组件，具体取决于项目的需求和个人偏好。

使用受控组件的场景：

• 需要追踪和管理表单元素的值，进行验证和处理逻辑。

• 希望React控制表单元素的状态，以便在应用中进行状态同步。

• 需要构建复杂的表单，包含多个输入字段和动态更新。

使用非受控组件的场景：

• 希望代码简洁，不需要编写大量的状态属性和事件处理函数。

• 关注性能，不希望触发React的重新渲染。

• 需要与第三方库或原生DOM集成，例如使用jQuery或其他库处理表单元素。