React 中的受控组件与非受控组件：选择正确的方法-js教程-PHP中文网

Controlled vs Uncontrolled Components in React: Choosing the Right Approach

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

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

1.什么是受控组件？

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

受控组件如何工作：

表单元素（如字段）的值由组件的状态控制。
任何用户输入都会触发 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 (
    <form>
      <input 
        type="text" 
        value={inputValue}       // Value is controlled by React state
        onChange={handleChange}   // Updates state on user input
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default ControlledForm;

登录后复制

受控组件的优点：

集中控制：状态在一个地方（React 组件）进行管理，使得跟踪和验证表单数据变得更加容易。
可预测性：由于React的状态是事实来源，因此表单元素始终与状态同步，确保可预测性。
轻松验证：您可以根据输入值执行实时表单验证或条件渲染，因为数据是组件状态的一部分。

2.什么是不受控制的组件？

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

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

表单元素的值存储在 DOM 中，而不是存储在 React 组件的状态中。
ref 用于直接访问 DOM 元素并检索或修改其值。
您可以选择使用 onSubmit 处理程序 在提交表单时处理数据。

不受控制的组件示例：

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 (
    <form>
      <input 
        type="text" 
        value={inputValue}       // Value is controlled by React state
        onChange={handleChange}   // Updates state on user input
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default ControlledForm;

登录后复制

不受控组件的优点：

更少的样板文件：无需管理表单元素的状态，使代码更干净、更简单，尤其是对于具有大量字段的表单。
性能：由于表单元素的值不存储在React的状态中，因此不受控制的组件有时可以在具有许多动态输入或复杂表单的场景中提供更好的性能。
对于简单的用例来说更自然：对于非常简单的表单或者当用户键入时不需要与表单数据交互时，不受控制的组件可能是一个更简单的解决方案。

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

功能受控组件不受控制的组件标题>

Feature	Controlled Components	Uncontrolled Components
State Management	Data is managed by React’s state.	Data is managed by the DOM, using refs.
Data Flow	Value is passed as a prop and updated via state.	Value is accessed directly through the DOM.
Form Validation	Easy to validate and control form data in real-time.	Validation is more complex and may require additional handling.
Boilerplate Code	Requires more code to manage state and updates.	Less boilerplate code but requires refs for accessing form data.
Performance	May be slower with a large number of form elements.	Faster for large forms or when you don’t need real-time data updates.
Complexity	Offers more flexibility and control over form behavior.	Simpler and more straightforward for simple forms.

状态管理数据由 React 的状态管理。数据由 DOM 使用 refs 进行管理。数据流值作为 prop 传递并通过状态更新。直接通过 DOM 访问值。表单验证轻松实时验证和控制表单数据。验证更加复杂，可能需要额外处理。样板代码需要更多代码来管理状态和更新。更少的样板代码，但需要引用来访问表单数据。性能大量表单元素可能会变慢。对于大型表单或不需要实时数据更新时速度更快。复杂性提供更大的灵活性和对表单行为的控制。简单表单更简单、更直接。表>