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

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

回答思路:说说受控组件-->说说非受控组件-->应用场景

受控组件:

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

举例:

javascript 复制代码
class TestComponent extends React.Component{
	constructor(props){
		super(props);
		this.state = {username:'Tom'};
	}
	render(){
		return <input name="username" value={this.state.username}></input>	
	}
}

这时候当我们在输入框输入内容时,会发现输入的内容无法显示出来,此时input标签是一个可读的状态,因为value被this.state.username所控制,当用户输入时,this.state.username不会自动更新,这样的话input的内容就不会发生变化了,想要解除被控制,可以为input标签设置onChange事件,触发的时候更新state,从而导致input框内容更新

非受控组件

简单来讲,就是不受我们控制的组件,一般情况是在初始化的时候接受外部数据,然后自己在内部存储自身状态,当需要时,可以使用ref查询DOM并查找当前值,如下:

javascript 复制代码
import React,{Component} form 'react';
export class ExampleComp extedns Component{
	constructor (props){
		super(props);
		this.inputRef = React.createRef();
	}
	handleSubmit = (e) =>{
		console.log("获取input框的值为:",this.inputRef.current.value);
		e.preventDefault();
	}
	render(){
		return (
		<form onSubmit={e => this.handleSubmit(e)}>
		<input defaultValue="Tom" ref={this.inputRef} />
		<input type="submit" value="提交" />
		</form>
	)
	}
}

应用场景

大多数推荐使用受控组件来实现表单,因为受控组件表单数据由React组件负责处理,非受控组件控制能力弱,表单数据由DOM本身处理,但更加方便快捷,代码量少

特征 不受控组件 受控组件
一次性取值,如提交时
提交时验证
即时现场验证 ×
有条件地禁用提交按钮 ×
强制输入格式 ×
一个数据的多个输入 ×
动态输入 ×
相关推荐
GISer_Jing12 分钟前
React中Element、Fiber、createElement和Component关系
前端·react.js·前端框架
折翼的恶魔1 小时前
前端学习之样式设计
前端·css·学习
IT_陈寒2 小时前
JavaScript性能优化:3个被低估的V8引擎技巧让你的代码提速50%
前端·人工智能·后端
云飞云共享云桌面2 小时前
SolidWorks服务器多人使用方案
大数据·运维·服务器·前端·网络·电脑·制造
Red Car2 小时前
javascript 性能优化实例一则
开发语言·javascript·ecmascript
艾小码2 小时前
从Hello World到变量数据类型:JavaScript新手避坑指南
前端·javascript
街尾杂货店&3 小时前
css word-spacing属性
前端·css
千叶寻-3 小时前
正则表达式
前端·javascript·后端·架构·正则表达式·node.js
光影少年8 小时前
angular生态及学习路线
前端·学习·angular.js
記億揺晃着的那天10 小时前
Vue + Element UI 表格自适应高度如何做?
javascript·vue.js·ui