react受控组件指的是什么

这篇文章主要介绍“react受控组件指的是什么”，在日常操作中，相信很多人在react受控组件指的是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”react受控组件指的是什么”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

在react中，受控组件指的是通过回调函数来更新当前值的组件；渲染表单的React组件还控制着用户输入过程中表单发生的操作，每当表单的状态发生变化时，都会被写入到组件的state中，这种组件在React被称为受控组件。

本教程操作环境：Windows10系统、react17.0.1版、Dell G3电脑。

react受控组件是什么

渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。

有网友这样解释：在React中，每当表单的状态发生变化时，都会被写入到组件的state中，这种组件在React被称为受控组件。

受控组件的更新流程：

• 1，可以通过在初始state中设置表单的默认值

• 2，每当表单的值发生变化时，调用onChange事件处理器，

• 3，事件处理器通过事件对象e拿到改变后的状态，改变state；

• 4，setState触发视图更新，完成表单组件值的更新

受控组件是通过通过回调函数来更新当前值，譬如 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} />;
}

扩展知识：

什么是不受控组件？

不受控组件则是内部存储自身状态的组件，可以使用 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 。

对于受控组件，我们可以在输入时进行验证，但对于不受控组件则不能进行验证。

到此，关于“react受控组件指的是什么”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！