长沙营销型网站建设,北京网络公司的网站,郴州网上报名小学系统登录,软件系统设计大家好#xff0c;我是前端西瓜哥#xff0c;今天我们来看看 React 的受控组件和非受控组件有什么不同。
受控组件
受控组件#xff0c;指的是将表单元素的值交给组件的 state 来保存。
例子#xff1a;
import ./styles.css
import { useState } from reactconst App …大家好我是前端西瓜哥今天我们来看看 React 的受控组件和非受控组件有什么不同。
受控组件
受控组件指的是将表单元素的值交给组件的 state 来保存。
例子
import ./styles.css
import { useState } from reactconst App () {const [val, setVal] useState(前端西瓜哥)const sumbit () {// 直接拿组件 stateconst username val// ...}return (div用户名inputvalue{val}onInput{(e) {setVal(e.target.value)}}/.../div)
}我们用 value prop 控制着 input 元素的值当发生输入事件时我们将新值赋值给 val然后 val 再通过 value 强制更新到 input。
这种写法可以让 state 一直保持和 input 的内容相同我们可以直接读取 state将其传递给其他地方比如通过 redux 去传递。
缺点是会进行组件的重渲染一般来说表单元素并不复杂重渲染成本不高可以忽略不计。
非受控组件
非受控就是指状态不由组件的 state 把持而是让表单元素的内部控制着状态在我们需要的时候再通过 element.value 的方式取出。
表单元素的初始值通过 defaultValue prop 来设置。
例子
const App () {const ref useRef(null)const sumbit () {// 通过元素的引用取值const username ref.current?.value// ...}return (div用户名input ref{ref} defaultValue前端西瓜哥 /.../div)
}优点是不会更新组件。缺点是不方便实时将值传给其他组件。
另外它适合一种延迟更新状态的场景。比如输入一些内容回车后失焦发现格式不合法就恢复为上一次的值。
结尾
受控组件和非受控组件区别在于前者的表单状态由组件 state 控制后者则是表单元素自己控制要用时再读元素的值。
我是前端西瓜哥欢迎关注我学习更多前端知识。
