受控与非受控组件: 区别、实例和最佳实践

前端

2023-11-05 21:27:06

受控与非受控组件：React中处理表单数据的两大法宝

React的世界里，处理表单数据是一门不小的学问。作为React开发者，我们经常面临着一个选择：是使用受控组件还是非受控组件？本篇文章将深入剖析这两种组件类型，帮助你根据自己的项目需求做出最明智的选择。

受控组件：掌控表单的缰绳

受控组件就像驯服的骏马，它将表单数据牢牢握在组件状态中。每当表单发生改变，组件状态也会随之更新，从而准确地反映用户输入的内容。

优点：

数据验证和处理易如反掌： 受控组件使你能够轻松地对输入数据进行验证和处理，确保其符合特定的规则和格式。
双向绑定水到渠成： 受控组件实现了表单数据的双向绑定，允许你通过更改组件状态来更新表单，反之亦然。

缺点：

不必要的重新渲染： 组件状态的频繁更新可能会触发不必要的重新渲染，降低应用程序的性能。
样板代码繁琐： 使用受控组件通常需要更多的样板代码来管理组件状态和事件处理。

最佳使用场景：

当需要对表单数据进行验证或处理时。
当需要实现表单数据的双向绑定时。

非受控组件：让表单自由驰骋

非受控组件更像是一匹野马，它将表单数据直接存储在DOM中。当表单发生改变时，组件状态并不会立即更新，而是需要手动获取DOM的值。

优点：

避免不必要的重新渲染： 非受控组件不依赖于组件状态，因此可以有效避免不必要的重新渲染，提升应用程序的性能。
样板代码更精简： 使用非受控组件不需要管理组件状态，从而减少了样板代码的数量。

缺点：

双向绑定困难重重： 实现非受控组件的双向绑定比较困难，需要额外的代码和处理逻辑。
验证和处理数据不那么方便： 由于数据存储在DOM中，对表单数据进行验证和处理会变得更加复杂。

最佳使用场景：

当不需要对表单数据进行验证或处理时。
当不需要实现表单数据的双向绑定时。

代码示例：驾驭受控与非受控组件

让我们通过代码示例来进一步理解这两类组件的使用方式。

受控组件示例：

import React, { useState } from "react";

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

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

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

非受控组件示例：

import React, { useRef } from "react";

const UncontrolledComponent = () => {
  const inputRef = useRef();

  const handleSubmit = (event) => {
    event.preventDefault();

    const value = inputRef.current.value;

    // 表单数据处理逻辑
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} />
      <button type="submit">提交</button>
    </form>
  );
};