react受控组件是什么
作者：互联网
2022-07-04
Javascript教程
在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 ;}扩展知识：
什么是不受控组件？
不受控组件则是内部存储自身状态的组件，可以使用 ref 查询 DOM，以便在需要时查找其当前值。有点像传统的 HTML。大多数原生的 React 表单组件都支持受控和不受控:
const { useRef } from 'react';function Example () { const inputRef = useRef(null); return }4 它们之间有什么区别？
在受控组件中，表单数据由 React 组件处理。而在不受控组件中，表单数据由 DOM 本身处理。
对于受控组件，必须使用组件状态。对于不受控制的组件，状态的使用是完全可选的，但必须在其中使用 Refs 。
对于受控组件，我们可以在输入时进行验证，但对于不受控组件则不能进行验证。
相关标签:
相关推荐
专题
+ 收藏
+ 收藏
+ 收藏
+ 收藏
+ 收藏
+ 收藏
最新数据
相关文章
vite+vue2 动态路由加载方法实现
「性能优化」虚拟列表极致优化实战：从原理到源码，打造丝滑滚动体验
你的 Vue 3 生命周期，VuReact 会编译成什么样的 React？
你的 Vue 3 defineProps()，VuReact 会编译成什么样的 React？
Vue条件渲染详解：v-if、v-show用法与实战指南
前端性能内卷终点？Signals 正在重塑我们的开发习惯
使用 IntersectionObserver + 哨兵元素实现长列表懒加载
大屏卡成 PPT？这 3 个性能优化招数亲测有效
别再用 JSON.parse 深拷贝了，聊聊 StructuredClone
当 Vue 3 遇上桥接模式：手把手教你优雅剥离虚拟滚动的业务大泥球
AI精选
