受控组件还是非受控组件？一文读懂两种组件的区别

2023-05-18 05:16:33

受控组件与非受控组件：为您的 React 表单做出明智选择

在 React 中，表单输入元素可以分为两类：受控组件和非受控组件。这两种方法在使用上存在差异，因此，了解它们之间的区别至关重要，以便为您的表单选择最合适的选项。

受控组件：状态为王

受控组件是指表单输入元素的值由 React 组件的状态所管理。当用户与受控组件交互（例如，在文本输入框中输入内容）时，React 将更新组件的状态，从而反映用户所做的更改。

代码示例：

import React, { useState } from "react";

const App = () => {
  const [name, setName] = useState("");

  return (
    <div>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
    </div>
  );
};

export default App;

优点：

对值有完全控制权： React 始终掌控着受控组件的值，允许您轻松验证和重置它们。
轻松验证： 您可以轻松地将自定义验证规则应用于受控组件，确保用户输入的合法性。
状态同步： 受控组件确保组件的状态始终与表单输入元素的值保持同步，简化了数据管理。

缺点：

额外的代码： 与非受控组件相比，使用受控组件需要编写更多的代码来处理状态管理。
潜在性能问题： 频繁更新组件状态可能会影响应用程序的性能，尤其是处理大型表单时。

非受控组件：赋予用户权力

非受控组件是指表单输入元素的值由用户直接控制。React 不会跟踪非受控组件的值，而只是提供一个界面，允许用户与它们交互。

代码示例：

import React from "react";

const App = () => {
  return (
    <div>
      <input type="text" defaultValue="Hello World" />
    </div>
  );
};

export default App;