说说对受控组件和非受控组件的理解,以及应用场景?

简介: 受控组件,简单来讲,就是受我们控制的组件,组件的状态全程响应外部数据

受控组件

受控组件,简单来讲,就是受我们控制的组件,组件的状态全程响应外部数据


例如:

import React,{useState} from 'react'
export default function App() {
  const [data,setdata] = useState("受控组件")
  return (
    <div>
      <input value={data}></input>
    </div>
  )
}


eca265d684d64cc191cb5669efa378a1.png

这时候当我们在输入框输入内容的时候,会发现输入的内容并无法显示出来,也就是input标签是一个可读的状态


这是因为value被data所控制住。当用户输入新的内容时,data并不会自动更新,这样的话input内的内容也就不会变了

如果想要解除被控制,可以为input标签设置onChange事件,输入的时候触发事件函数,在函数内部实现data数据的更新,从而导致input框的内容页发现改变


因此,受控组件我们一般需要初始状态和一个状态更新事件函数

非受控组件

非受控组件,简单来讲,就是不受我们控制的组件 一般情况是在初始化的时候接受外部数据,然后自己在内部存储其自身状态

import React,{useState} from 'react'
export default function App() {
  const [data,setdata] = useState("非受控组件")
  return (
    <div>
       <input defaultValue={data} />
    </div>
  )
}


12c412940a254991bbcc71e240d68b63.png

两者的应用场景

bf0c3792662e4dc39f71f401f6f02b98.png

相关文章
|
5月前
|
JSON 数据格式 开发者
淘宝天猫图片搜索商品接口(附代码示例)
拍立淘图片搜索接口支持开发者通过上传图片或提供图片URL,在淘宝、天猫平台搜索相似商品,适用于商品识别、比价等场景。接口采用POST(上传图片)或GET(图片URL)请求方式,返回JSON格式数据,包含商品ID、标题、价格、卖家信息、销量及图片URL等详情,参数可指定搜索关键词、类目、结果数量等,默认返回20条。
|
前端开发 JavaScript
6种解决移动端1px的方案
6种解决移动端1px的方案
415 0
|
11月前
|
数据可视化 项目管理 调度
工作效率低下怎么办?这些方法帮你提升!
本文探讨了现代企业中普遍存在的工作效率低下问题,分析了信息不透明、沟通不畅、任务分配混乱等关键原因,并提出通过提升信息透明度、优化沟通方式、科学分配任务、建立实时进度追踪机制及合理分配资源等方法来解决。特别介绍了板栗看板作为高效项目管理工具的应用,强调其在提升团队协作和执行效率方面的作用。
|
机器学习/深度学习 数据可视化 数据挖掘
Python在数据分析中的应用及其优势
数据分析在当今信息化时代具有重要意义,而Python作为一种简洁而强大的编程语言,在数据分析领域有着突出的优势。本文将介绍Python在数据分析中的应用及其优势,包括其丰富的库、易读的语法和广泛的社区支持,以及如何利用Python进行数据处理、可视化和建模。
|
缓存 测试技术 Apache
告别卡顿!Python性能测试实战教程,JMeter&Locust带你秒懂性能优化💡
告别卡顿!Python性能测试实战教程,JMeter&Locust带你秒懂性能优化💡
345 1
|
机器学习/深度学习 人工智能 前端开发
跨界融合:前端技术与人工智能的奇妙联盟
在技术的世界里,前端开发不再是孤岛。本文探讨了前端技术如何与人工智能领域结合,为用户体验与功能提升开辟了新的可能性。从机器学习到智能推荐系统,我们将看到这些技术如何在前端应用中发挥其 ultimate 的作用。
|
算法 Linux 调度
根基已筑!Anolis OS 23.1 预览版本搭载 Linux 6.6 内核和工具链升级完成
Anolis OS 23.1 对软件包的选择和组合进行了重新规划与决策,满足更为广泛的应用场景需求。
|
前端开发 JavaScript
受控组件和非受控组件的区别
受控组件和非受控组件的区别