React 中的受控组件与非受控组件

受控组件：通过 state 或 props 控制表单元素状态的 React 组件，即每个状态突变都会有一个相关的处理函数。

特征

由状态控制的值-元素值绑定到状态变量

需要事件处理程序 - 要更新状态，您需要事件处理程序

可预测 - 由于组件状态代表输入值，因此组件是可预测的并且易于调试

React 处理输入数据并且不依赖 DOM 来跟踪当前输入值

import React, { useState } from 'react';

function ControlledForm() {
  const [value, setValue] = useState('');

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

  return (
    
      
    
  );
}

非受控组件：React 组件，其中 DOM 本身处理表单元素的状态。React 通过 ref 访问输入值，ref 在内部存储其自己的状态，您可以使用 ref 查询 DOM 以在需要时找到其当前值。这更像传统的 HTML。

特征

由 DOM 控制的值 - 输入字段的值不绑定到状态变量。

使用 Ref 访问值或在需要时获取输入元素的值

如果您不需要实时控制输入，它们的设置会更简单。

适用于不需要反应状态来控制输入的场景。

import React, { useRef } from 'react';

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

  const handleSubmit = (event) => {
    event.preventDefault();
    alert('Input Value: ' + inputRef.current.value);
  };

  return (
    
      
      
    
  );
}

以下是受控组件和非受控组件的比较表：

**何时使用**

受控——用于实时验证、输入格式化或即时反馈。

不受控制 - 用于简单用例，例如文件上传预填表单值并不频繁或需要推迟到表单提交。

CLIS.CC

React 中的受控组件与非受控组件