react受控组件和非受控组件区别
一、受控组件
在HTML中,表单元素的标签、、等的值改变通常是根据用户输入进行更新。
在React中,可变状态通常保存在组件的状态属性中,并且只能使用 setState() 进行更新,而呈现表单的React组件也控制着在后续用户输入时该表单中发生的情况,以这种由React控制的输入表单元素而改变其值的方式,称为受控组件。
比如,给表单元素input绑定一个onChange事件,当input状态发生变化时就会触发onChange事件,从而更新组件的state。
import React, { Component } from 'react'
export default class MyInput extends Component{constructor(props) {super(props);this.state = {value: 0}}handleChange = (event)=>{this.setState({value: event.target.value})}render(){return(<div><inputtype="text"value={this.state.value}onChange={this.handleChange}/></div>)}
}
受控组件更新state的流程
- 可以通过初始state中设置表单的默认值
- 每当表单的值发生变化时,调用onChange事件处理器
- 事件处理器通过事件对象event拿到改变后的状态,并更新组件的state
- 一旦通过setState方法更新state,就会触发视图的重新渲染,完成表单组件的更新
React中数据是单项流动的,从示例中,可以看出表单的数据来源于组件的state,并通过props传入,这也称为单向数据绑定。然后又通过onChange事件处理器将新的数据写回到state,完成了双向数据绑定。
二、非受控组件
非受控组件指的是,表单数据由DOM本身处理。即不受setState()的控制,与传统的HTML表单输入相似,input输入值即显示最新值。
在非受控组件中,可以使用一个ref来从DOM获得表单值。
class NameForm extends React.Component {constructor(props) {super(props);this.handleSubmit = this.handleSubmit.bind(this);}handleSubmit(event) {console.log('A name was submitted: ' + this.input.value);event.preventDefault();}render() {return (<form onSubmit={this.handleSubmit}><label>Name:<input type="text" ref={(input) => this.input = input} /></label><input type="submit" value="Submit" /></form>);}
}
非受控组件在底层实现时是在其内部维护了自己的状态state,这样表现出用户输入任何值都能反应到元素上。
三、总结
两者区别
- 受控组件
受控组件依赖于状态
受控组件的修改会实时映射到状态值上,此时可以对输入的内容进行校验
受控组件只有继承React.Component才会有状态
受控组件必须要在表单上使用onChange事件来绑定对应的事件 - 非受控组件
非受控组件不受状态的控制
非受控组件获取数据就是相当于操作DOM
非受控组件可以很容易和第三方组件结合,更容易同时集成 React 和非 React 代码
选择受控组件还是非受控组件 - 受控组件使用场景:一般用在需要动态设置其初始值的情况。例如:某些form表单信息编辑时,input表单元素需要初始显示服务器返回的某个值然后进行编辑。
- 非受控组件使用场景:一般用于无任何动态初始值信息的情况。例如:form表单创建信息时,input表单元素都没有初始值,需要用户输入的情况。
react受控组件和非受控组件区别相关推荐
- [react] 受控组件和非受控组件有什么区别?
[react] 受控组件和非受控组件有什么区别? 受控组件用value和组件的state绑定,当value更新时,会自动更新state 非受控组件没有value,采用ref直接操作dom 个人简介 我 ...
- 【React】知识点归纳:受控组件与非受控组件区别
React: 受控组件与非受控组件区别 受控组件 示范代码: 原理图: 非受控组件 示范代码: 结论 受控组件 在HTML中,标签<input>.<textarea>.< ...
- 深入react技术栈(10):受控组件和非受控组件
我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注前端小歌谣 受控组件 非受控组件 受控组件和非受控组件的区别 文章参考深入React技术栈
- React中受控组件和非受控组件
受控组件 在React中,每当表单的状态发生变化时,都会被写入到组件的state中,这种组件在React被称为受控组件.受控组件中,组件渲染的状态与它的value或者checked相对应.React通 ...
- 什么是React受控组件和非受控组件
React是一个非常流行的JavaScript库,用于构建Web应用程序.React中有两种类型的组件,受控组件和非受控组件.在本文中,我们将深入研究这两种组件的区别,优缺点以及如何选择适当的组件类型 ...
- React 的受控组件和非受控组件有什么不同
大家好,我是前端西瓜哥,今天我们来看看 React 的受控组件和非受控组件有什么不同. 受控组件 受控组件,指的是将表单元素的值交给组件的 state 来保存. 例子: import './style ...
- react受控组件与非受控组件
react受控组件与非受控组件区别在于: 受控组件中输入框的值由其change事件接管,做对应的数据劫持操作,例如可以对输入框的值进行合法输入校验(匹配正则),此时表单数据由 React 组件来管理( ...
- React 之受控组件和非受控组件
在React中,所谓受控组件和非受控组件,是针对表单而言的. 表单受控组件 表单元素依赖于状态,表单元素需要默认值实时映射到状态的时候,就是受控组件,这个和双向绑定相似. 受控组件,表单元素的修改会实 ...
- 【React】之受控组件和非受控组件
React中的组件根据是否受React控制可分为受控的和非受控的. 一.受控组件 表单元素依赖于状态,表单元素需要默认值实时映射到状态的时候,就是受控组件,这个和双向绑定相似. 受控组件,表单元素的修 ...
- React的受控组件和非受控组件
一.受控组件 表单元素依赖于状态,表单元素需要默认值实时映射到状态的时候,就是受控组件,这个和双向绑定相似. 受控组件,表单元素的修改会实时映射到状态值上,此时就可以对输入的内容进行校验. 受控组件只 ...
最新文章
- Ubuntu中使用WPS
- 排序算法(还需补充)
- python详细安装教程3.7.0-Python 3.7.0安装教程(附安装包) | 我爱分享网
- Leetcode 392. 判断子序列 (每日一题 20210929)
- maven配置开源中国镜像
- html加载时页面闪烁白色背景,解决页面加载闪白问题-背景图片加载优化
- 可以编写html的文件吗,我可以使用HTML5/JS编写文件吗?
- springMVC配置
- [转]git merge 与 git rebase的区别
- mac php memcache扩展,Mac下PHP安装Memcache扩展
- C# 英文系统上中文 string 显示乱码
- OE 发邮件 500 Error: bad syntax', Port: 25, ... Error Number: 0x800CCC79
- 粒子场优化(Particle Field Optimization,PFO)
- 冒泡、选择、快速、归并、堆排序算法 python实现
- cacti 监控自身
- springboot2.4+nettyWebServerApplicationContext@15f51c50 has been closed already问题解决
- android studio生成jks,Android Studio生成keystore签名文件步骤讲解
- 使用github安装vue-devtools
- 非主流文字转换_一篇搞定微信公众号文字排版(全干货,推荐收藏)
- JavaSE----基础语法(数组)