在react中说说对受控组件和非受控组件的理解？以及应用场景-Toy模板网

这篇具有很好参考价值的文章主要介绍了在react中说说对受控组件和非受控组件的理解？以及应用场景。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

回答思路：说说受控组件–>说说非受控组件–>应用场景

受控组件：

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

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并查找当前值，如下：

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本身处理，但更加方便快捷，代码量少文章来源地址https://www.toymoban.com/news/detail-814169.html

特征	不受控组件	受控组件
一次性取值，如提交时	√	√
提交时验证	√	√
即时现场验证	×	√
有条件地禁用提交按钮	×	√
强制输入格式	×	√
一个数据的多个输入	×	√
动态输入	×	√