受控组件与非受控组件

在 React 中，表单组件的状态管理通常分为两类：受控组件（Controlled Components） 和 非受控组件（Uncontrolled Components）。这两种方式的区别主要体现在如何管理组件的状态和与 React 的数据流关系。了解这两者的不同，可以帮助你更好地控制表单输入和组件的行为。

1. 受控组件（Controlled Components）

受控组件 是指其值由 React 的 state 来控制的组件。React 完全掌控该组件的状态，组件的输入值只能通过 React 的 state 进行更新。每当表单输入的值发生变化时，都会触发 onChange 事件，React 会根据这个事件更新组件的状态。

1.1 受控组件的特点

  • 输入值是由 React 的 state 管理的。
  • 输入的变化通过 onChange 事件触发，并且会更新 React 的 state。
  • 任何时候组件的值都会与 state 保持同步。

1.2 示例：受控组件

以下是一个典型的受控组件例子：

import React, { useState } from 'react';

function ControlledForm() {
  const [inputValue, setInputValue] = useState("");

  // 处理输入变化
  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  // 提交表单
  const handleSubmit = (event) => {
    event.preventDefault();
    alert("Submitted value: " + inputValue);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input 
          type="text" 
          value={inputValue}   // value 由 state 控制
          onChange={handleChange}  // 通过 onChange 更新 state
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default ControlledForm;

说明：

  • value={inputValue} 使得输入框的值被 inputValue 变量控制。
  • onChange={handleChange} 监听输入框的变化，并更新 inputValue。

2. 非受控组件（Uncontrolled Components）

非受控组件 是指其值不由 React 管理，而是由 DOM 元素自身管理。React 通过 ref 来直接访问和操作 DOM 元素，非受控组件的状态变化通常通过直接操作 DOM 来完成，而不是通过 React 的 state 来管理。

2.1 非受控组件的特点

  • 输入值是由 DOM 本身管理的。
  • React 不参与输入值的变化，而是通过 ref 获取当前值。
  • 使用 ref 获取当前 DOM 元素的状态。

2.2 示例：非受控组件

以下是一个典型的非受控组件例子：

import React, { useRef } from 'react';

function UncontrolledForm() {
  const inputRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    alert("Submitted value: " + inputRef.current.value); // 使用 ref 获取值
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input 
          type="text" 
          ref={inputRef}  // 使用 ref 获取输入框的值
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default UncontrolledForm;

说明：

  • ref={inputRef} 创建对输入框的引用。
  • 提交时通过 inputRef.current.value 获取当前输入框的值。

3. 受控组件与非受控组件的对比

3.1 数据流

  • 受控组件：数据由 React 的 state 控制，任何输入都需要通过 React 的状态管理更新。
  • 非受控组件：数据由 DOM 控制，通过 ref 获取输入框的值。

3.2 使用场景

  • 受控组件：适用于大多数情况，尤其是需要在多个组件之间共享表单数据时，或者需要实时验证表单输入时。
  • 非受控组件：适用于简单表单，或者在某些情况下不需要 React 管理状态时，比如提交时一次性读取输入值。

3.3 优势与劣势

受控组件：

  • 优势：React 完全控制组件的状态，便于调试和状态管理。
  • 劣势：需要更多的代码来管理 state，可能导致性能问题（尤其是在处理复杂表单时）。

非受控组件：

  • 优势：实现简单，避免了过多的 state 管理，性能开销较低。
  • 劣势：不方便进行表单验证或跨组件共享状态，灵活性较差。

3.4 性能考虑

在某些情况下，非受控组件可能提供更好的性能，因为它们不依赖于 React 的 state 重新渲染组件。但在大多数应用中，受控组件提供的灵活性和可控性通常更适合。

4. 小结

  • 受控组件 和 非受控组件 是 React 中处理表单输入的两种主要方式。
  • 受控组件 由 React 管理状态，确保表单元素和 React 的状态同步。
  • 非受控组件 通过 DOM 自行管理状态，使用 ref 来访问和操作输入元素。
  • 根据项目的需求和表单复杂度选择合适的方式：简单表单可以使用非受控组件，而复杂表单或需要共享表单状态时，受控组件是更好的选择。
Last Updated::