受控组件与非受控组件：React表单元素的两种类型

前端

2024-01-12 21:51:19

受控组件 vs 非受控组件：React 表单元素的比较

在 React 中处理表单元素时，你可能会遇到受控组件和非受控组件这两个概念。理解它们之间的区别对于为你的应用程序选择正确的组件至关重要。让我们深入探讨这些概念，了解它们的关键特性、优点和缺点，并通过示例了解它们在实际中的应用。

受控组件

想象你正在建造一座房子，而房子的价值取决于里面装潢的质量。在这种情况下，你希望能够直接控制房子的价值，对吧？在 React 中，受控组件就是这样工作的。

受控组件是指由 React 组件完全控制其值的表单元素。这类似于在房子里，你是室内设计师，有权决定房间的价值，并随时对其进行更改。受控组件的价值由组件中的状态管理，当你与表单交互时，状态会更新，从而更新表单元素的价值。

非受控组件

现在想象你正在建造一座房子，但你聘请了一位外部承包商来处理室内装潢。在这种情况下，你无法直接控制房子的价值，因为它是由第三方（承包商）决定的。在 React 中，非受控组件就是这样工作的。

非受控组件是指不由 React 组件控制其值的表单元素。它们的行为类似于外部承包商，负责处理自己的价值，不受组件状态的影响。非受控组件的值直接存储在 DOM 中，当你与表单交互时，DOM 会更新，从而更新表单元素的值。

选择合适的组件类型

那么，如何决定使用受控还是非受控组件呢？就像在建造房屋时决定是否聘请承包商一样，你需要考虑以下因素：

数据流方向： 如果你需要在组件中存储表单元素的值，那么受控组件是你的不二之选。
性能： 对于频繁更新的表单元素，非受控组件可能更有效率。
代码简洁性： 受控组件可以使代码更简洁，因为你可以直接在组件中处理表单元素的值。

受控组件的优缺点

就像房屋的价值取决于室内装潢的质量一样，受控组件也有一些优点和缺点：

优点：

数据流方向： 受控组件允许你轻松管理表单元素的值，因为你可以直接在组件中更新状态。
代码简洁性： 受控组件可以使代码更简洁，因为你可以直接在组件中处理表单元素的值。

缺点：

性能： 对于频繁更新的表单元素，受控组件可能效率较低。
代码复杂性： 受控组件需要你在组件中存储表单元素的值，这可能会增加代码的复杂性。

非受控组件的优缺点

就像聘请承包商有其利弊一样，非受控组件也有其优点和缺点：

优点：

性能： 对于频繁更新的表单元素，非受控组件可能更有效率。
代码简单性： 非受控组件不需要你在组件中存储表单元素的值，这可以减少代码的复杂性。

缺点：

数据流方向： 非受控组件更难管理表单元素的值，因为你需要在 DOM 中更新元素的值。
代码简洁性： 非受控组件的代码可能更冗长，因为你需要在 DOM 中更新元素的值。

示例

现在，让我们通过一些实际示例来了解受控和非受控组件之间的差异：

受控组件示例：

import React, { useState } from "react";

const MyComponent = () => {
  const [value, setValue] = useState("");

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <input type="text" value={value} onChange={handleChange} />
  );
};

export default MyComponent;

在这个示例中，我们有一个输入字段，其值由组件中的状态管理。当用户输入时，handleChange 函数被调用，并更新状态，从而更新输入字段的值。

非受控组件示例：

import React, { useRef } from "react";

const MyComponent = () => {
  const inputRef = useRef(null);

  const handleChange = (event) => {
    console.log(inputRef.current.value);
  };

  return (
    <input type="text" ref={inputRef} onChange={handleChange} />
  );
};

export default MyComponent;