对受控组件和非受控组件的理解？应用场景？

🕗 发布于 2025-01-13 09:59 前端 react.js 前端框架 javascript

受控组件与非受控组件的理解与应用

在 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>
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleChange}
        />
      </div>
      <div>
        <label>邮箱：</label>
        <input
          type="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;