受控组件与非受控组件

在 React 中，受控组件和非受控组件是处理表单输入的两种不同方法。了解它们之间的区别对于选择最适合特定应用程序需求的方法至关重要。

受控组件

• 定义：受控组件是与组件 state 同步的表单元素。这意味着组件 state 始终反映输入元素的值。
• 实现：受控组件使用 value 属性和 onChange 事件处理程序来更新组件 state。
• 优点：
  • 提供对表单输入的完全控制。
  • 允许根据组件 state 验证和处理输入。
  • 可以在组件内部轻松重置表单。
• 缺点：
  • 样板代码更多，因为需要管理 state 和事件处理程序。
  • 当处理复杂表单或嵌套表单时，可能难以维护。

非受控组件

• 定义：非受控组件不与组件 state 同步。相反，它们将值存储在 DOM 中，并且组件只能通过 ref 访问这些值。
• 实现：非受控组件使用 ref 来访问 DOM 元素，然后使用 current.value 访问其值。
• 优点：
  • 样板代码更少，因为不需要管理 state 和事件处理程序。
  • 更易于处理复杂表单或嵌套表单。
• 缺点：
  • 对表单输入没有完全控制。
  • 难以验证和处理输入。
  • 无法在组件内部重置表单。

主要区别

何时使用受控组件？

• 当需要对表单输入进行完全控制时，例如验证、处理或重置表单。
• 当使用诸如表单库之类的第三方组件时。

何时使用非受控组件？

• 当需要简单、低维护的表单时。
• 当处理复杂表单或嵌套表单时。

示例

以下示例展示了受控组件和非受控组件的用法：

受控组件：

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

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

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

非受控组件：

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

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

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

结论

受控组件和非受控组件是 React 中处理表单输入的两种不同方法。受控组件提供对表单输入的完全控制，而非受控组件更易于实现和维护。根据应用程序需求选择最合适的方法对于编写高效且可维护的 React 代码至关重要。