React | 受控组件（Controlled Component）与不受控组件（Uncontrolled Component）的区别

1 概述

如果碰到下面的警告，你将如何处理呢？

我们在使用 React 时，处理文件经常会碰到这个警告。这个警告与有状态 DOM 组件(譬如，表单元素)有关。

2 什么是受控组件？

受控组件是通过通过回调函数来更新当前值，譬如 OnChange。父组件则通过回调函数控制并管理它的状态并将新值作为属性传给它。受控组件也称为“哑巴组件”。

const { useState } from 'react';

function Controlled () {
  const [email, setEmail] = useState();

  const handleInput = (e) => setEmail(e.target.value);


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

3 什么是不受控组件？

不受控组件则是内部存储自身状态的组件，可以使用 ref 查询 DOM，以便在需要时查找其当前值。有点像传统的 HTML。大多数原生的 React 表单组件都支持受控和不受控:

const { useRef } from 'react';

function Example () {
  const inputRef = useRef(null);
  return <input type="text" defaultValue="bar" ref={inputRef} />
} 

4 它们之间有什么区别？

• 在受控组件中，表单数据由 React 组件处理。而在不受控组件中，表单数据由 DOM 本身处理。
• 对于受控组件，必须使用组件状态。对于不受控制的组件，状态的使用是完全可选的，但必须在其中使用 Refs 。
• 对于受控组件，我们可以在输入时进行验证，但对于不受控组件则不能进行验证。

5 总结

如果你在做一个大型项目，所有的输入组件都已经作为公共组件创建，为了保持应用程序之间的一致性，那么最好使用受控组件。如果是小型项目，不需要在运行时更改事件操作，那么使用不受控组件将易于管理。