回答思路：說說受控組件–>說說非受控組件–>應(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)，因?yàn)関alue被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)前值，如下：文章來源：http://www.zghlxwxcb.cn/news/detail-814169.html
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ù)推薦使用受控組件來實(shí)現(xiàn)表單，因?yàn)槭芸亟M件表單數(shù)據(jù)由React組件負(fù)責(zé)處理，非受控組件控制能力弱，表單數(shù)據(jù)由DOM本身處理，但更加方便快捷，代碼量少文章來源地址http://www.zghlxwxcb.cn/news/detail-814169.html
| 特征 | 不受控組件 | 受控組件 |
|---|---|---|
| 一次性取值，如提交時 | √ | √ |
| 提交時驗(yàn)證 | √ | √ |
| 即時現(xiàn)場驗(yàn)證 | × | √ |
| 有條件地禁用提交按鈕 | × | √ |
| 強(qiáng)制輸入格式 | × | √ |
| 一個數(shù)據(jù)的多個輸入 | × | √ |
| 動態(tài)輸入 | × | √ |
到了這里，關(guān)于在react中說說對受控組件和非受控組件的理解？以及應(yīng)用場景的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
