让表单数据尽在掌控：受控与非受控组件的灵活运用

前端

2023-12-07 18:35:55

在Web开发中，表单是获取和提交用户输入的至关重要的手段。React作为前端框架的领军者，提供了两种不同的组件来处理表单：受控组件和非受控组件。了解这两种组件的特性和应用场景，对于开发者来说至关重要。

受控组件：掌控全局

受控组件的精髓在于其内部状态完全由外部数据决定。当用户输入表单时，React会实时更新组件的状态，确保表单数据始终与源数据保持一致。这种控制方式的优点显而易见：

数据一致性： 无论用户如何操作表单，受控组件始终能保证数据与源数据同步，避免不一致的情况。
简化状态管理： React负责维护受控组件的状态，开发人员只需关注事件处理和数据更新。
双向绑定： 受控组件支持双向绑定，表单数据既可以通过外部修改，也可以通过组件自身更新。

非受控组件：自主独立

非受控组件与受控组件相反，其内部状态不受外部数据控制。它们只在初始化时接受外部数据，之后便自行维护状态，不受外界影响。这种自主性带来了一些优势：

更轻量： 非受控组件无需持续追踪状态变化，因此实现更轻量，适合处理简单的数据输入。
可控性更强： 开发人员可以完全控制非受控组件的状态，在需要时进行自定义更新。
与第三方库兼容： 非受控组件可以轻松与第三方库整合，满足各种定制需求。

灵活运用：根据场景而定

受控组件和非受控组件并非泾渭分明，而是各有千秋。选择哪种组件取决于具体的应用场景和需求。一般来说：

数据一致性要求高： 使用受控组件，确保数据始终准确无误。
表单简单，状态变化少： 使用非受控组件，降低组件复杂度。
需要自定义状态更新： 使用非受控组件，获得完全的控制权。

示例代码

受控组件：

import { useState } from "react";

const MyInput = ({ value, onChange }) => {
  const [inputValue, setInputValue] = useState(value);

  const handleChange = (e) => {
    setInputValue(e.target.value);
    onChange(e.target.value);
  };

  return <input value={inputValue} onChange={handleChange} />;
};

非受控组件：

const MyInput = ({ value }) => {
  const ref = useRef(null);

  useEffect(() => {
    ref.current.value = value;
  }, [value]);

  return <input ref={ref} />;
};