React 中的受控组件与非受控组件：选择正确的方法

# Web 开发 # JavaScript # 初学者

React 中的受控组件与非受控组件：理解差异

在 React 中，可以使用**受控组件**或**非受控组件**来管理表单元素（如输入字段、复选框和文本区域）。这两种方法提供了不同的处理和更新表单数据的方法，了解它们之间的区别对于为您的 React 应用程序选择正确的方法至关重要。

1.什么是受控组件？

在**受控组件**中，表单元素由**React 组件的状态**控制。表单数据通过 React 的状态进行管理，用户所做的任何更改都会反映在组件的状态中。React 组件充当表单数据的“唯一真实来源”。

受控组件的工作原理：

表单元素（例如组件字段（field）的值由组件的状态控制。

任何用户输入都会触发 onChange 事件，从而更新父组件中的状态。

然后将状态传回表单元素，确保它与应用程序状态保持同步。

受控组件示例：

import React, { useState } from 'react';

const ControlledForm = () => {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (e) => {
    setInputValue(e.target.value);  // Update the state with the user input
  };

  return (
    
      
      
    
  );
};

export default ControlledForm;

受控组件的优点：

集中控制：在一个地方（React 组件）管理状态，从而更容易跟踪和验证表单数据。

可预测性：由于 React 的状态是真相的来源，表单元素始终与状态同步，从而确保可预测性。

轻松验证：您可以根据输入值执行实时表单验证或条件渲染，因为数据是组件状态的一部分。

2.什么是非受控组件？

在**不受控组件**中，表单元素由 DOM 本身管理，而不是 React 的状态。React 不会直接跟踪表单元素的值。相反，您可以使用**refs**（引用）来访问 DOM 元素并检索其当前值。

不受控制的组件如何工作：

表单元素的值存储在 DOM 中，而不是 React 组件的状态中。

ref 用于直接访问 DOM 元素并检索或修改其值。

您可以选择使用 onSubmit 处理程序在提交表单时处理数据。

不受控制的组件示例：

import React, { useRef } from 'react';

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

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Input Value: ${inputRef.current.value}`); // Access value using ref
  };

  return (
    
       {/* Using ref to access value */}
      
    
  );
};

export default UncontrolledForm;

非受控组件的优点：

更少的样板：不需要管理表单元素的状态，使得代码更干净、更简单，特别是对于具有大量字段的表单。

性能：由于表单元素的值未存储在 React 的状态中，因此在具有许多动态输入或复杂表单的场景中，不受控制的组件有时可以提供更好的性能。

对于简单的用例来说更自然：对于非常简单的表单或者当您在用户输入时不需要与表单数据交互时，不受控制的组件可以是一个更简单的解决方案。

3. 受控组件与非受控组件：主要区别

4.何时使用受控组件？

在下列情况下，受控组件是首选：

您需要动态地与表单数据交互（例如，验证，条件渲染）。

您需要实时更新表单数据（例如实时搜索、表单验证）。

您需要管理和验证表单中的多个输入。

5.何时使用非受控组件？

非受控组件更适合以下情况：

您拥有简单的表格，无需实时交互或验证。

您想减少在 React 中处理表单数据的复杂性。

性能至关重要，并且表单元素不希望动态改变或实时交互。

6. 结论

受控组件和非受控组件在 React 应用程序中都有一席之地。受控组件提供更好的控制和可预测性，使其成为大多数复杂表单的理想选择。但是，对于基本表单或您不需要实时控制数据时，非受控组件可能是一种更简单且性能更高效的解决方案。

了解何时使用每种类型的组件将帮助您根据具体用例决定最佳方法。

CLIS.CC