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

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

受控组件

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


例如:

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

相关文章
|
2月前
|
存储 前端开发 JavaScript
React的受控组件与非受控组件(九)
【8月更文挑战第15天】React的受控组件与非受控组件
28 2
React的受控组件与非受控组件(九)
|
2月前
|
存储 前端开发 JavaScript
React 中受控组件和非受控组件的区别
【8月更文挑战第31天】
22 0
|
2月前
|
存储 JavaScript 前端开发
受控组件与非受控组件
【8月更文挑战第24天】
27 0
|
2月前
|
前端开发 数据安全/隐私保护
React——受控组件和非受控组件【八】
React——受控组件和非受控组件【八】
33 0
|
5月前
|
存储 前端开发 JavaScript
React的表单处理:受控组件与非受控组件深入解析
【4月更文挑战第25天】React表单处理涉及受控和非受控组件。受控组件通过状态管理表单数据,每次用户输入都触发状态更新,确保数据同步,适合实时交互但可能影响性能。非受控组件不直接管理状态,数据存储在DOM中,简化代码,适用于更新不频繁的场景,但在数据验证和同步上存在挑战。开发者应根据需求灵活选择。
|
5月前
|
存储 前端开发 JavaScript
第十章 React中的非受控组件和受控组件
第十章 React中的非受控组件和受控组件
|
5月前
|
前端开发
React中受控组件与非受控组件的使用
React中受控组件与非受控组件的使用
|
5月前
|
存储 前端开发 JavaScript
react受控组件与非受控组件
react受控组件与非受控组件
46 0
|
11月前
|
前端开发 JavaScript
react中受控组件与非受控组件
react中受控组件与非受控组件
41 0
|
11月前
|
前端开发
如何理解受控和非受控件组件?
如何理解受控和非受控件组件?