受控组件与非受控组件的理解与应用
在 React 中，组件可以通过两种方式管理表单元素的状态：受控组件和非受控组件。这两者在处理表单输入数据时有很大的区别，理解它们的应用场景和优劣对于开发者来说非常重要。
目录结构：
- 受控组件与非受控组件概述
- 受控组件（Controlled Component）详解
- 2.1 受控组件的特点
- 2.2 受控组件的应用场景
- 2.3 受控组件的实际代码示例
- 非受控组件（Uncontrolled Component）详解
- 3.1 非受控组件的特点
- 3.2 非受控组件的应用场景
- 3.3 非受控组件的实际代码示例
- 受控组件与非受控组件的区别
- 4.1 状态管理方式
- 4.2 数据流和表单控制
- 4.3 性能和灵活性
- 总结
受控组件与非受控组件概述
受控组件和非受控组件都涉及到 React 中的表单元素（如 <input>, <select>, <textarea> 等）的状态管理。
-
受控组件是指由 React 管理表单元素的值，所有的表单数据都保存在 React 组件的状态中。任何表单元素的更新都通过 React 的
state来管理。 -
非受控组件是指表单元素的状态不由 React 管理，而是由 DOM 来管理。你可以通过 React 的
ref获取或操作这些元素的值。
受控组件（Controlled Component）详解
2.1 受控组件的特点
- 在受控组件中，表单元素的值是由 React 的
state来控制的。 - 每当表单输入发生变化时，React 会更新组件的状态，从而触发重新渲染。
- 受控组件通常通过
value和onChange事件来处理输入。
2.2 受控组件的应用场景
- 当需要对表单数据进行校验、格式化或跟踪时，受控组件是一个非常好的选择。
- 需要将表单数据发送到服务器或进行复杂的逻辑处理时，受控组件也很适用。
- 需要获取多个表单字段值，或者在表单提交前需要统一处理时，使用受控组件可以确保数据的一致性。
2.3 受控组件的实际代码示例
import React, { useState } from 'react';const ControlledForm = () => {const [formData, setFormData] = useState({ name: '', email: '' });const handleChange = (e) => {const { name, value } = e.target;setFormData((prevData) => ({...prevData,[name]: value,}));};const handleSubmit = (e) => {e.preventDefault();alert(`提交的表单数据：${JSON.stringify(formData)}`);};return (<form onSubmit={handleSubmit}><div><label>姓名：</label><inputtype="text"name="name"value={formData.name}onChange={handleChange}/></div><div><label>邮箱：</label><inputtype="email"name="email"value={formData.email}onChange={handleChange}/></div><button type="submit">提交</button></form>);
};export default ControlledForm;
解释：
- 组件的
formData是通过useState管理的，name和email分别对应表单中的两个字段。 value属性使得<input>的值与formData状态绑定。- 通过
onChange事件更新状态，实现对输入值的控制。 - 在表单提交时，我们可以直接从状态
formData获取并提交数据。
非受控组件（Uncontrolled Component）详解
3.1 非受控组件的特点
- 在非受控组件中，表单元素的状态是由 DOM 自身管理的，而 React 仅通过
ref获取其值。 - 不需要使用 React 的状态来管理表单数据，可以直接通过
ref访问 DOM 元素的值。 - 非受控组件的值只能通过访问 DOM 节点来获取，不能直接通过 React 的
state控制其值。
3.2 非受控组件的应用场景
- 当表单控件的状态不需要被 React 管理时，可以使用非受控组件，避免不必要的重渲染。
- 对于简单的表单或不需要实时跟踪表单状态的场景，非受控组件是一个合适的选择。
- 在集成第三方库或处理一些传统表单时，非受控组件可以更加轻松地与外部 DOM 操作兼容。
3.3 非受控组件的实际代码示例
import React, { useRef } from 'react';const UncontrolledForm = () => {const nameRef = useRef();const emailRef = useRef();const handleSubmit = (e) => {e.preventDefault();alert(`提交的姓名：${nameRef.current.value}，邮箱：${emailRef.current.value}`);};return (<form onSubmit={handleSubmit}><div><label>姓名：</label><input type="text" ref={nameRef} /></div><div><label>邮箱：</label><input type="email" ref={emailRef} /></div><button type="submit">提交</button></form>);
};export default UncontrolledForm;
解释：
- 组件使用
useRef创建引用，nameRef和emailRef用于获取<input>元素的 DOM 引用。 - 表单数据不通过 React 的状态管理，直接通过
ref.current.value获取输入的值。 - 在提交表单时，我们访问
ref获取输入值，而不需要存储在state中。
受控组件与非受控组件的区别
4.1 状态管理方式
- 受控组件：通过 React 的
state管理表单数据，状态变化会触发重新渲染。 - 非受控组件：通过 DOM 自身管理表单数据，React 仅通过
ref来访问数据，不会触发重新渲染。
4.2 数据流和表单控制
- 受控组件：数据流是单向的，所有的表单输入都通过 React 控制，适合需要实时验证或处理表单数据的场景。
- 非受控组件：数据流不由 React 完全控制，适合不需要实时反馈的简单表单。
4.3 性能和灵活性
- 受控组件：每次用户输入时都会更新 React 的
state，这可能导致频繁的重新渲染。对于复杂表单或有大量输入的场景，可能会影响性能。 - 非受控组件：因为数据直接由 DOM 控制，不会频繁触发重新渲染，因此在性能上比受控组件更优。
总结
- 受控组件使得表单输入的数据能够被 React 控制，适用于需要处理、验证或提交表单数据的场景。
- 非受控组件则由 DOM 管理输入数据，适用于较为简单的表单场景，或当我们不需要实时操作表单数据时。
- 在选择使用哪种组件时，考虑到表单的复杂性、性能需求以及是否需要实时验证或修改数据，可以做出合适的选择。