第三十七章：React的受控组件与非受控组件-React 进阶实践指南

当前位置:　首页>> 技术小册>> React 进阶实践指南

### 第三十七章：React的受控组件与非受控组件

在React的浩瀚宇宙中，组件是构建用户界面的基石。而深入理解受控组件（Controlled Components）与非受控组件（Uncontrolled Components）的概念，则是掌握React表单处理与状态管理的关键一步。本章将深入探讨这两种组件类型的定义、应用场景、优缺点以及如何在React项目中灵活运用它们。

#### 一、受控组件（Controlled Components）

##### 1.1 定义与工作原理

受控组件是指那些其值由React组件的state控制的React表单元素。简单来说，每当表单字段（如输入框、选择框等）的值发生变化时，这个变化不会直接反映到DOM上，而是会触发一个事件（如onChange），该事件会更新组件的state，随后React会根据最新的state重新渲染表单元素，从而保持DOM与React状态的一致性。

##### 1.2 示例代码

以下是一个受控组件的简单示例，展示了一个文本输入框如何与其状态保持同步：

```jsx
class ControlledInput 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 (
      <input
        type="text"
        value={this.state.value}
        onChange={this.handleChange}
      />
    );
  }
}
```

在这个例子中，`input`元素的`value`属性被绑定到了组件的`state.value`上，而每当用户在输入框中输入文本时，`onChange`事件处理器会被调用，更新`state.value`，从而触发组件的重新渲染，保持输入框的内容与组件状态同步。

##### 1.3 优点

- **状态可控**：由于组件的状态完全由React管理，因此可以很方便地通过编程方式修改表单数据，如清空表单、验证输入等。
- **数据一致性**：由于DOM的状态总是反映组件的state，因此可以避免因用户直接操作DOM导致的数据不一致问题。

##### 1.4 缺点

- **代码量增加**：对于复杂的表单，需要为每一个输入字段编写相应的状态更新逻辑，可能会增加代码复杂度。
- **性能考虑**：在大型表单中，频繁的state更新和组件重渲染可能会对性能产生影响。

#### 二、非受控组件（Uncontrolled Components）

##### 2.1 定义与工作原理

与受控组件相反，非受控组件的DOM状态不由React组件的state直接控制。这类组件通常会使用DOM元素的默认行为来存储其值，如`<input type="file">`或`<input type="checkbox">`等，这些元素的值通常不由React的state直接管理。对于非受控组件，React提供了`ref`属性来访问真实的DOM元素，从而可以读取或设置其值。

##### 2.2 示例代码

以下是一个非受控组件的示例，展示了如何使用`ref`来访问和设置文件输入框的值：

```jsx
class UncontrolledFileInput extends React.Component {
  constructor(props) {
    super(props);
    this.fileInput = React.createRef();
  }

handleClick = () => {
    // 触发文件选择对话框
    this.fileInput.current.click();
  }

handleFileChange = (event) => {
    // 处理文件选择后的逻辑
    console.log(event.target.files);
  }

render() {
    return (
      <div>
        <button onClick={this.handleClick}>选择文件</button>
        <input
          type="file"
          ref={this.fileInput}
          onChange={this.handleFileChange}
          style={{display: 'none'}} // 隐藏原生输入框
        />
      </div>
    );
  }
}
```

在这个例子中，`<input type="file">`是一个典型的非受控组件，因为它的值（即用户选择的文件）不由React的state控制。我们通过`ref`来访问这个输入框，并在用户选择文件后通过`onChange`事件处理器来处理文件。

##### 2.3 优点

- **简化代码**：对于某些类型的表单元素（如文件输入、复选框组等），使用非受控组件可以减少代码量，因为这些元素的行为已经很好地被浏览器定义。
- **接近原生体验**：非受控组件的行为与原生HTML元素更为接近，有时可以提供更好的用户体验。

##### 2.4 缺点

- **数据一致性难保证**：由于非受控组件的值不由React状态直接控制，因此在某些情况下（如需要通过编程方式修改表单数据时），可能会遇到数据不一致的问题。
- **依赖DOM**：使用`ref`访问DOM元素可能会增加组件与DOM的耦合度，降低代码的可测试性和可维护性。

#### 三、受控与非受控组件的选择策略

在实际开发中，选择受控组件还是非受控组件，取决于具体的应用场景和需求。以下是一些选择策略：

- **当需要完全控制表单数据或进行复杂的表单验证时**，选择受控组件。
- **当表单元素的行为已经很接近原生HTML元素，且不需要通过编程方式频繁修改其值时**，选择非受控组件。
- **混合使用**：在复杂的应用中，可以根据需要混合使用受控组件和非受控组件，以达到最佳的开发效率和用户体验。

#### 四、结论

受控组件与非受控组件是React中处理表单数据的两种重要方式。它们各有优缺点，选择哪一种取决于具体的应用场景和需求。通过深入理解这两种组件的工作原理和特性，我们可以更加灵活地构建高效、可维护的React应用。希望本章的内容能够帮助你更好地掌握React的表单处理技巧，为你的React进阶之路添砖加瓦。

该分类下的相关小册推荐：

剑指Reactjs

React全家桶--前端开发与实例(上)

React全家桶--前端开发与实例(下)

深入学习React实战进阶

ReactJS面试指南