理解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本身处理，但更加方便快捷，代码量少

受控组件与非受控组件区别

React受控组件和非受控组件之间的最大区别是组件的值是由React状态控制还是由DOM节点控制。

受控组件：

• 受控组件依赖于状态
• 受控组件只有继承React.Component才会有状态
• 受控组件必须要在表单上使用onChange事件来绑定对应的事件
• 受控组件的修改会实时映射到状态值上，此时可以对输入的内容进行校验

非受控组件：

• 非受控组件不受状态的控制
• 非受控组件获取数据就是相当于操作DOM，而不会更新React状态
• 非受控组件可以很容易和第三方组件结合，更容易同时集成 React 和非 React 代码

受控组件与非受控组件优缺点

受控组件
优点

• 容易进行验证和处理：由于组件的值由React状态控制，就可以轻松地验证和处理组件的值。例如，可以使用onChange事件验证组件的值是否满足特定的条件，更新React状态反映验证结果。
• 有更好的可预测性：由于组件的值由React状态控制，因此组件的行为更容易预测。例如，当组件的值发生变化时，它将始终更新React状态并重新渲染，这使得应用程序更加可预测。

缺点

• 更多的代码：由于组件的值由React状态控制，因此需要编写更多的代码来管理组件的值。这可能会导致代码更难以维护和理解。
• 性能问题：由于每次组件的值发生变化时，它都会更新React状态并重新渲染，这可能会影响性能。如果您在处理大量数据时使用受控组件，则可能会遇到性能问题。

非受控组件

优点

• 更快的更新：由于组件的值由DOM节点控制，因此非受控组件可以更快地更新。这使得非受控组件适用于需要高速更新的场景，例如实时搜索框。
• 更少的代码：由于组件的值不由React状态控制，因此需要编写更少的代码来管理组件的值。这使得代码更易于维护和理解。

缺点
难以进行验证和处理：因为组件的值不由React状态控制，难以对其进行验证和处理。

• 更少的可预测性：组件的值由DOM节点控制，因此组件的行为更难以预测。例如，当组件的值发生变化时，它不会更新React状态并重新渲染，这可能会导致应用程序的行为更加不可预测。

到此这篇关于理解react中受控组件和非受控组件及应用场景的文章就介绍到这了,更多相关react 受控组件和非受控组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！ 

最新评论