React 受控组件与非受控组件详解，轻松掌控组件状态
2023-01-28 11:27:03
React 受控组件与非受控组件：一文读懂
在 React 的世界中，组件是应用程序构建的基本模块，它们可以分为两类：受控组件和非受控组件。理解它们的异同至关重要，有助于你构建高效且可控的 React 应用。
受控组件：React 掌控一切
就像一位细心的家长，受控组件由 React 掌管其状态。这意味着组件的状态（例如，输入框的值）完全由 React 管理和控制。React 始终知道受控组件的当前状态，并会根据用户输入或应用程序状态的变化进行更新。
这种控制权带来的好处显而易见。它确保了数据的一致性，简化了表单验证，并使状态更新更可控。React 可以通过受控组件的 API（例如，onChange、value）轻松跟踪状态变化，从而避免意外更新。
代码示例：受控输入框
import React, { useState } from "react";
const MyInput = () => {
const [value, setValue] = useState("");
const handleChange = (event) => {
setValue(event.target.value);
};
return <input value={value} onChange={handleChange} />;
};
export default MyInput;
非受控组件：组件的自主选择
与受控组件不同，非受控组件的状态由组件本身管理和控制。React 对其状态的变化一无所知，它独立于 React 的状态管理之外。非受控组件通常用于不需要 React 参与状态管理的场景，例如，输入框的值不需要与应用程序的状态相关联。
代码示例：非受控输入框
const MyInput = () => {
const ref = useRef(null);
const focusInput = () => {
ref.current.focus();
};
return <input ref={ref} />;
};
export default MyInput;
非受控组件的优点：
- 性能优化： 由于 React 不需要跟踪非受控组件的状态，因此它们的性能通常优于受控组件。
- 实现简化： 非受控组件的实现通常更简单，因为不需要编写代码来处理状态的更新。
- 灵活性增强： 非受控组件可以更灵活地处理用户输入，因为 React 不需要了解其状态。
受控组件与非受控组件：该如何选择？
在大多数情况下，受控组件是更好的选择，因为它具有更好的数据一致性、更简单的表单验证和更可控的状态更新。然而，如果你需要的是性能、简单实现或灵活性，那么非受控组件可能是更好的选择。
在某些情况下，你可能需要在同一个组件中同时使用受控组件和非受控组件。例如，一个带有受控输入框的表单，其中一个按钮使用非受控组件来重置表单。
转换非受控组件为受控组件
如果你需要将非受控组件转换为受控组件，那么你需要：
- 在组件中添加一个状态属性来存储组件的状态。
- 在组件的渲染方法中，使用受控组件的 API（例如，onChange、value）来更新组件的状态。
- 在组件的事件处理函数中，使用 React 的 setState 方法来更新组件的状态。
最佳实践：
- 优先使用受控组件： 在大多数情况下，受控组件是更好的选择。
- 仅在需要时使用非受控组件： 只有在性能或实现方面有特殊要求时，才考虑使用非受控组件。
- 将受控组件和非受控组件结合使用： 在某些情况下，你可能需要在同一个组件中同时使用受控组件和非受控组件。
常见问题解答：
1. 什么是受控组件？
受控组件是指由 React 管理和控制其状态的组件。
2. 什么是非受控组件？
非受控组件是指由组件本身管理和控制其状态的组件。
3. 受控组件的优点是什么？
受控组件的优点包括数据一致性、表单验证简化和状态更新更可控。
4. 非受控组件的优点是什么？
非受控组件的优点包括性能优化、实现简化和灵活性增强。
5. 如何将非受控组件转换为受控组件？
要将非受控组件转换为受控组件，你需要在组件中添加一个状态属性，在组件的渲染方法中使用受控组件的 API，并在组件的事件处理函数中使用 React 的 setState 方法。
