回答思路：說說受控組件–>說說非受控組件–>應(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組件負(fù)責(zé)處理，非受控組件控制能力弱，表單數(shù)據(jù)由DOM本身處理，但更加方便快捷，代碼量少

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

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

受控組件：

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

非受控組件：

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

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

受控組件
優(yōu)點

• 容易進(jìn)行驗證和處理：由于組件的值由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)點

• 更快的更新：由于組件的值由DOM節(jié)點控制，因此非受控組件可以更快地更新。這使得非受控組件適用于需要高速更新的場景，例如實時搜索框。
• 更少的代碼：由于組件的值不由React狀態(tài)控制，因此需要編寫更少的代碼來管理組件的值。這使得代碼更易于維護和理解。

缺點
難以進(jìn)行驗證和處理：因為組件的值不由React狀態(tài)控制，難以對其進(jìn)行驗證和處理。

• 更少的可預(yù)測性：組件的值由DOM節(jié)點控制，因此組件的行為更難以預(yù)測。例如，當(dāng)組件的值發(fā)生變化時，它不會更新React狀態(tài)并重新渲染，這可能會導(dǎo)致應(yīng)用程序的行為更加不可預(yù)測。

到此這篇關(guān)于理解react中受控組件和非受控組件及應(yīng)用場景的文章就介紹到這了,更多相關(guān)react 受控組件和非受控組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！ 

最新評論