全面解读受控组件与非受控组件：征服表单输入管理！

前端

2024-01-15 02:47:30

受控组件与非受控组件：管理表单输入的两个选择

引言

在现代前端开发中，交互表单是网站和应用程序不可或缺的一部分。无论是注册登录、订单填写还是调查问卷，都离不开表单输入。而如何管理这些表单输入，受控组件和非受控组件成为两大主流方案。

受控组件：状态掌控

受控组件是指，表单输入的状态由组件来管理。也就是说，当用户在受控组件中输入数据时，组件的状态也会随之更新。受控组件通常使用 value 属性来保存输入数据，并使用 onChange 事件来监听输入的变化。

优点：

状态管理简单：受控组件的状态由组件自身管理，状态管理更加集中和易于维护。
数据同步性好：由于状态由组件管理，组件可以随时获取到最新的输入数据，数据同步性更好。
表单验证简单：受控组件可以轻松实现表单验证，因为组件可以随时获取到输入数据，并根据验证规则进行判断。

缺点：

代码复杂度高：受控组件需要更多的代码来管理状态和事件，代码复杂度更高。
性能消耗大：受控组件需要不断监听输入的变化并更新状态，性能消耗更大。

非受控组件：数据自由

非受控组件是指，表单输入的状态由 DOM 节点来管理。这意味着，当用户在非受控组件中输入数据时，DOM 节点中的值也会随之更新。非受控组件通常使用 defaultValue 属性来设置初始值，并使用 ref 属性来获取 DOM 节点。

优点：

代码简单：非受控组件的代码更简单，因为不需要管理状态和事件。
性能消耗小：非受控组件不需要监听输入的变化并更新状态，性能消耗更小。

缺点：

状态管理复杂：非受控组件的状态由 DOM 节点管理，状态管理更加分散和难以维护。
数据同步性差：由于状态由 DOM 节点管理，组件不能随时获取到最新的输入数据，数据同步性较差。
表单验证复杂：非受控组件实现表单验证更加复杂，因为组件不能随时获取到输入数据，需要通过其他方式来获取和验证数据。

选择策略：量体裁衣

在实际开发中，受控组件和非受控组件都有各自的适用场景。一般来说，当表单数据需要实时更新或进行复杂的验证时，使用受控组件更合适 。而当表单数据不需要实时更新或验证规则简单时，使用非受控组件更合适 。

代码示例：

受控组件：

import React, { useState } from "react";

const MyForm = () => {
  const [input, setInput] = useState("");

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

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

export default MyForm;

非受控组件：

import React, { useRef } from "react";

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

  const handleSubmit = (event) => {
    event.preventDefault();
    const inputValue = inputRef.current.value;
    // ...
  };

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

export default MyForm;