React的受控组件和非受控组件
一、受控组件
表单元素依赖于状态,表单元素需要默认值实时映射到状态的时候,就是受控组件,这个和双向绑定相似.
受控组件,表单元素的修改会实时映射到状态值上,此时就可以对输入的内容进行校验.
受控组件只有继承React.Component才会有状态.
受控组件必须要在表单上使用onChange事件来绑定对应的事件.
import React, { Component } from 'react'
export default class Shoukong extends Component {// 这样的写法也是声明在实例上的对象state = {username: "ff",// 给组件状态设置默认值,在实时修改时进行校验}// e为原生的事件绑定对象handleChange = (e) => {// 获取原生对象上的属性let name = e.target.name;this.setState({username: e.target.value})}render() {return (<div><p>{this.state.username}</p>用户名:<inputtype="text"value={this.state.username}onChange={this.handleChange} /></div>)}
}
受控组件更新state的流程
1、 可以通过初始state中设置表单的默认值
2、每当表单的值发生变化时,调用onChange事件处理器
3、事件处理器通过事件对象event拿到改变后的状态,并更新组件的state
4、通过setState方法更新state,就会触发视图的重新渲染,完成表单组件的更新
二、非受控组件
在虚拟DOM节点上声明一个ref属性,并且将创建好的引用赋值给这个ref属性
react会自动将输入框中输入的值放在实例的ref属性上
import React, { Component } from 'react'
export default class Feishou extends Component{
constructor(){super();// 在构造函数中创建一个引用this.myref=React.createRef();
}
handleSubmit = (e) => {// 阻止原生默认事件的触发(刷新)e.preventDefault();console.log(this.myref.current.value);
}
render() {return (<form onSubmit={this.handleSubmit}>{/* 自动将输入框中输入的值放在实例的myref属性上 */}<inputtype="text"ref={this.myref}/><button>提交</button> {/* 手动提交 */}</form>)
}
}
非受控组件在底层实现时是在其内部维护了自己的状态state,这样表现出用户输入任何值都能反应到元素上。
三、对比受控组件和非受控组件的输入流程:
- 非受控组件: 用户输入A => input 中显示A
- 受控组件: 用户输入A => 触发onChange事件 => handleChange 中设置 state.name = “A” => 渲染input使他的value变成A
正式因为这样,使得 React 的 state 成为唯一数据源。对于受控组件来说,输入的值始终由 React 的 state 驱动。
所以官方强烈推荐使用受控组件,因为它能更好的控制组件的生命流程。
注意:
受控组件的两个要点:
组件的value属性与React中的状态绑定
组件内声明了onChange事件处理value的变化
非受控组件更像是传统的HTML表单元素,数据存储在DOM中,而不是组件内部,获取数据的方式是通过ref引用
尽可能使用受控组件
受控组件是将状态交由React处理,可以是任何元素,不局限于表单元素
对于有大量表单元素的页面,使用受控组件会使程序变得繁琐难控,此时使用非受控组件更为明智
在受控组件中,数据流是单向的(state是变化来源),因此在改变state时都应该使用setState,而不要强制赋值
Refs不能用于函数式组件,因为函数式组件没有实例
在函数式组件内部,是可以使用Refs的
React的受控组件和非受控组件相关推荐
- [react] 受控组件和非受控组件有什么区别?
[react] 受控组件和非受控组件有什么区别? 受控组件用value和组件的state绑定,当value更新时,会自动更新state 非受控组件没有value,采用ref直接操作dom 个人简介 我 ...
- 深入react技术栈(10):受控组件和非受控组件
我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注前端小歌谣 受控组件 非受控组件 受控组件和非受控组件的区别 文章参考深入React技术栈
- React中受控组件和非受控组件
受控组件 在React中,每当表单的状态发生变化时,都会被写入到组件的state中,这种组件在React被称为受控组件.受控组件中,组件渲染的状态与它的value或者checked相对应.React通 ...
- React 之受控组件和非受控组件
在React中,所谓受控组件和非受控组件,是针对表单而言的. 表单受控组件 表单元素依赖于状态,表单元素需要默认值实时映射到状态的时候,就是受控组件,这个和双向绑定相似. 受控组件,表单元素的修改会实 ...
- 【React】之受控组件和非受控组件
React中的组件根据是否受React控制可分为受控的和非受控的. 一.受控组件 表单元素依赖于状态,表单元素需要默认值实时映射到状态的时候,就是受控组件,这个和双向绑定相似. 受控组件,表单元素的修 ...
- 【React】知识点归纳:受控组件与非受控组件区别
React: 受控组件与非受控组件区别 受控组件 示范代码: 原理图: 非受控组件 示范代码: 结论 受控组件 在HTML中,标签<input>.<textarea>.< ...
- 什么是React受控组件和非受控组件
React是一个非常流行的JavaScript库,用于构建Web应用程序.React中有两种类型的组件,受控组件和非受控组件.在本文中,我们将深入研究这两种组件的区别,优缺点以及如何选择适当的组件类型 ...
- React 的受控组件和非受控组件有什么不同
大家好,我是前端西瓜哥,今天我们来看看 React 的受控组件和非受控组件有什么不同. 受控组件 受控组件,指的是将表单元素的值交给组件的 state 来保存. 例子: import './style ...
- react——非受控组件和非受控组件的应用
非受控组件和非受控组件的应用 什么是非受控组件: 非受控组件:它应用的次数没有受控组件多,在工作中,多数使用为受控组件 非受控组件:表单项中的value或checked值,它不受state中的属性控制 ...
最新文章
- U深度利用iso文件制作U盘启动盘
- Java_IO流(精讲)包含练习题及答案
- spring mvc 异步_DeferredResult – Spring MVC中的异步处理
- easyui获取下拉框选中的文本值_Word中文本显示不全的常见3种情况及解决方法
- idea首次创建新模块的详细操作
- e_msg_c_gs_enter_gs_req
- Abp vnext Web应用程序开发教程 1 —— 创建服务器端
- Flutter实战之自定义日志打印组件
- 苹果CMSv10新手入门安装必看教程
- 建模实训报告总结_BIM建模实习报告,BIM实训总结1500字
- android o 结构光流程,结构光光斑图案生成方法和结构光光斑图案生成设备的制造方法...
- springboot美容院会员管理系统毕业设计源码191740
- 正六边形C语言输出算法记录
- 99_包(package)
- “左眼跳财,右眼跳灾”
- 原始投资100美元,C语言实现单利息投资和复合利息投资
- JavaScript 有趣的冷知识:tagged template literals
- Android rc 文件详解
- html如何把快变为行内元素,怎么把行元素变为块元素
- 微型计算机原理计算机钢琴,微型计算机原理及口技术钢琴课程设计.doc
热门文章
- WPS 表格自适应图片
- c语言关键字之auto
- 樊登读书会终身成长读后感_樊登读书会听书《终身成长》学习感悟
- android 电池容量检测,电池容量检测优化app
- 数据驱动业务,说的好听,做好很难!得这样才行
- 计算机run常用命令,Run-Command
- GEO数据库的使用(一)
- matlab中:错误使用 handle.handle/set 对象无效或已删除
- 对话管理DST:Deep Neural Network Approach for the Dialog State Tracking Challenge
- 基于Arduino的智能泡茶机(1)——机械系机械创新比赛总结技术点与不足处