【React学习】受控组件

**React学习系列之受控组件**

在 React 中，组件可以分为两类：受控组件（Controlled Component）和非受控组件（Uncontrolled Component）。这两种类型的组件有着不同的使用场景和特点。

本文将重点介绍受控组件的概念、优缺点以及如何在实际项目中应用它们。

**什么是受控组件？**

受控组件是指 React 组件可以控制其内部状态的变化。换句话说，组件的值是由 React 来管理的，而不是由用户直接输入的。这意味着组件的值可以被程序化地更新，而不是仅仅通过用户的交互。

**受控组件的优点**

1. **更好的控制力**: 受控组件允许你在任何时候都能够控制其内部状态，从而使得你的应用程序更加可预测和可靠。
2. **更好的性能**: 因为受控组件不需要频繁地更新 DOM，所以它们通常比非受控组件更快。
3. **更好的支持**: 受控组件通常得到更好的支持，因为它们是 React 的核心部分。

**受控组件的缺点**

1. **更多的代码**: 受控组件通常需要更多的代码来实现，因为你需要手动地更新其内部状态。
2. **更复杂的逻辑**: 受控组件可能需要更复杂的逻辑来管理其内部状态，从而使得它们更加难以维护。

**如何在实际项目中应用受控组件**

1. **使用 `useState` Hook**: 在 React 中，`useState` Hook 是一个非常方便的工具，可以帮助你创建受控组件。
2. **手动更新内部状态**: 当用户交互时，你需要手动地更新组件的内部状态，以便使得其值能够被控制。
3. **使用 `onChange`事件**: 在某些情况下，使用 `onChange`事件可以帮助你更好地管理组件的内部状态。

**示例代码**

jsximport React, { useState } from 'react';

function ControlledInput() {
 const [value, setValue] = useState('');

 return (
 <div>
 <input type="text"
 value={value}
 onChange={(e) => setValue(e.target.value)}
 />
 <p>当前值：{value}</p>
 </div>
 );
}

export default ControlledInput;

jsximport React, { useState } from 'react';

function ControlledSelect() {
 const [value, setValue] = useState('');

 return (
 <div>
 <select value={value} onChange={(e) => setValue(e.target.value)}>
 <option value="">请选择</option>
 <option value="选项1">选项1</option>
 <option value="选项2">选项2</option>
 </select>
 <p>当前值：{value}</p>
 </div>
 );
}

export default ControlledSelect;