React 中的受控与非受控: 一路畅行，优雅之上

2023-05-31 21:30:21

受控与非受控组件：React状态管理的艺术

在React应用程序中，管理组件状态是一个关键任务。你可以使用两种主要方法：受控组件和非受控组件。它们各有优势，在不同的情况下使用最为合适。本文将深入探讨这两种方法，帮助你做出明智的选择，打造高效而优雅的React应用程序。

受控组件：React的掌控权

受控组件是指其内部状态完全由React应用程序管理的组件。React应用程序将数据传递给组件，然后组件将其渲染到UI中。当用户与组件交互时，React应用程序会更新组件的状态，从而更新UI。这种方法确保了React应用程序始终拥有对组件状态的完全控制，从而保证了数据的一致性和完整性。

import React, { useState } from "react";

const MyControlledComponent = () => {
  const [value, setValue] = useState("");

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

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

export default MyControlledComponent;

在这个例子中，MyControlledComponent使用React的useState钩子管理其内部状态。当用户输入文本时，handleChange函数被调用，它更新组件的value状态，从而更新文本输入字段的UI。

非受控组件：独立自主

非受控组件是指其内部状态由用户或其他外部因素管理的组件。在这种情况下，组件不从React应用程序接收数据。相反，它通过自己的状态和方法管理其内部状态。当用户与非受控组件交互时，组件的状态会发生改变，但React应用程序不会立即意识到这些改变。只有当组件显式通知React应用程序时，React应用程序才会更新UI。这使得非受控组件更加独立，并且可以跨组件轻松复用。

import React from "react";

const MyUncontrolledComponent = () => {
  const ref = React.useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(ref.current.value);
  };

  return <form onSubmit={handleSubmit}><input type="text" ref={ref} /></form>;
};

export default MyUncontrolledComponent;

在这个例子中，MyUncontrolledComponent使用React的useRef钩子来管理其内部状态。表单提交时，handleSubmit函数被调用，它获取非受控输入字段的值并将其打印到控制台中。

选择你的武器：受控与非受控的适用场景

选择受控或非受控组件取决于组件的特定需求。以下是它们的典型适用场景：

受控组件：

需要严格控制组件状态的情况，例如表单输入框中的内容。
需要在组件之间共享状态的情况，例如多个组件需要访问相同的数据列表。
需要在组件中使用钩子（如useState和useEffect）的情况。

非受控组件：

需要组件拥有更大自主性的情况，例如下拉菜单不需要与父组件共享其内部状态。
需要跨组件复用组件的情况，例如日期选择器组件可以被多个组件使用。
需要在组件中使用受控组件无法实现的功能的情况，例如使用原生的HTML元素。

携手共进：受控与非受控的和谐

受控和非受控组件并非相互排斥。你可以将它们结合起来，创建灵活而强大的应用程序。例如：

使用受控组件管理组件的状态，并使用非受控组件处理用户交互。
使用非受控组件管理组件的状态，并使用受控组件共享数据。

常见问题解答

受控组件和非受控组件之间的主要区别是什么？
答：受控组件的状态由React应用程序管理，而非受控组件的状态由用户或外部因素管理。
哪种方法更好？
答：这取决于组件的需求。受控组件提供更好的数据控制，而非受控组件提供更大的自主性和跨组件复用性。
如何将受控和非受控组件结合使用？
答：你可以使用受控组件管理组件的状态，并使用非受控组件处理用户交互，或使用非受控组件管理组件的状态，并使用受控组件共享数据。
是否可以在非受控组件中使用钩子？
答：不可以，非受控组件不与React应用程序状态管理系统交互，因此无法使用钩子。
受控组件的优点和缺点是什么？
答：优点： 数据控制、一致性、共享数据。缺点： 可能更复杂、难以跨组件复用。