React 中什么是受控组件 (Controlled Component)？

推荐答案

在 React 中，受控组件（Controlled Component）是指其状态由 React 组件内部管理的表单元素。具体来说，受控组件的值通过 state 进行控制，并通过 onChange 事件处理程序来更新状态。这种方式使得 React 组件能够完全控制表单元素的行为和状态。

本题详细解读

什么是受控组件？

受控组件是指那些其值由 React 组件的 state 管理的表单元素。与受控组件相对的是非受控组件（Uncontrolled Component），非受控组件的值由 DOM 自身管理，而不是由 React 的 state 控制。

如何实现受控组件？

要实现一个受控组件，通常需要以下步骤：

1. 定义状态：在组件的 state 中定义一个属性来存储表单元素的值。
2. 绑定值：将表单元素的 value 属性绑定到 state 中的对应属性。
3. 处理变化：为表单元素添加 onChange 事件处理程序，以便在用户输入时更新 state。

示例代码

-- -------------------- ---- -------
------ ------ - -------- - ---- --------

-------- ----------------- -
  ----- ------- --------- - -------------

  ----- ------------ - ------- -- -
    -----------------------------
  --

  ------ -
    ------
      -----------
      -------------
      -----------------------
    --
  --
-

------ ------- ----------------

受控组件的优点

1. 完全控制：由于表单元素的值由 React 的 state 管理，开发者可以完全控制表单的行为和状态。
2. 实时验证：可以在 onChange 事件处理程序中进行实时验证或数据处理。
3. 统一管理：所有表单数据都集中在组件的 state 中，便于管理和维护。

受控组件的缺点

1. 代码量增加：相比于非受控组件，受控组件需要更多的代码来管理状态和事件处理。
2. 性能问题：对于大型表单或频繁更新的表单，可能会导致性能问题，因为每次输入都会触发状态更新和重新渲染。

适用场景

• 需要对表单输入进行实时验证或处理的场景。
• 需要将表单数据与其他组件状态进行同步的场景。
• 需要完全控制表单行为的场景。

通过使用受控组件，开发者可以更好地管理表单数据和行为，确保应用的稳定性和可维护性。