快捷導(dǎo)航

理解react中受控組件和非受控組件及應(yīng)用場景

更新時間：2024年01月22日 09:07:54 作者：王歪歪

當(dāng)涉及到React框架時,了解受控組件和非受控組件是非常重要的概念,本文主要介紹了理解react中受控組件和非受控組件及應(yīng)用場景,具有一定的參考價值,感興趣的可以了解一下

受控組件：

簡單來講，就是受我們控制的組件，組件的狀態(tài)全程響應(yīng)外部數(shù)據(jù)
舉例：

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

這時候當(dāng)我們在輸入框輸入內(nèi)容時，會發(fā)現(xiàn)輸入的內(nèi)容無法顯示出來，此時input標(biāo)簽是一個可讀的狀態(tài)，因為value被this.state.username所控制，當(dāng)用戶輸入時，this.state.username不會自動更新，這樣的話input的內(nèi)容就不會發(fā)生變化了，想要解除被控制，可以為input標(biāo)簽設(shè)置onChange事件，觸發(fā)的時候更新state，從而導(dǎo)致input框內(nèi)容更新

非受控組件

簡單來講，就是不受我們控制的組件，一般情況是在初始化的時候接受外部數(shù)據(jù)，然后自己在內(nèi)部存儲自身狀態(tài)，當(dāng)需要時，可以使用ref查詢DOM并查找當(dāng)前值，如下：

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>
	)
	}
}

應(yīng)用場景

大多數(shù)推薦使用受控組件來實現(xiàn)表單，因為受控組件表單數(shù)據(jù)由React組件負責(zé)處理，非受控組件控制能力弱，表單數(shù)據(jù)由DOM本身處理，但更加方便快捷，代碼量少

特征	不受控組件	受控組件
一次性取值，如提交時	√	√
提交時驗證	√	√
即時現(xiàn)場驗證	×	√
有條件地禁用提交按鈕	×	√
強制輸入格式	×	√
一個數(shù)據(jù)的多個輸入	×	√
動態(tài)輸入	×	√

受控組件與非受控組件區(qū)別

React受控組件和非受控組件之間的最大區(qū)別是組件的值是由React狀態(tài)控制還是由DOM節(jié)點控制。

受控組件：

受控組件依賴于狀態(tài)
受控組件只有繼承React.Component才會有狀態(tài)
受控組件必須要在表單上使用onChange事件來綁定對應(yīng)的事件
受控組件的修改會實時映射到狀態(tài)值上，此時可以對輸入的內(nèi)容進行校驗

非受控組件：

非受控組件不受狀態(tài)的控制
非受控組件獲取數(shù)據(jù)就是相當(dāng)于操作DOM，而不會更新React狀態(tài)
非受控組件可以很容易和第三方組件結(jié)合，更容易同時集成 React 和非 React 代碼

受控組件與非受控組件優(yōu)缺點

受控組件
優(yōu)點

容易進行驗證和處理：由于組件的值由React狀態(tài)控制，就可以輕松地驗證和處理組件的值。例如，可以使用onChange事件驗證組件的值是否滿足特定的條件，更新React狀態(tài)反映驗證結(jié)果。
有更好的可預(yù)測性：由于組件的值由React狀態(tài)控制，因此組件的行為更容易預(yù)測。例如，當(dāng)組件的值發(fā)生變化時，它將始終更新React狀態(tài)并重新渲染，這使得應(yīng)用程序更加可預(yù)測。

缺點

更多的代碼：由于組件的值由React狀態(tài)控制，因此需要編寫更多的代碼來管理組件的值。這可能會導(dǎo)致代碼更難以維護和理解。
性能問題：由于每次組件的值發(fā)生變化時，它都會更新React狀態(tài)并重新渲染，這可能會影響性能。如果您在處理大量數(shù)據(jù)時使用受控組件，則可能會遇到性能問題。

非受控組件

優(yōu)點