回答思路：說(shuō)說(shuō)受控組件–>說(shuō)說(shuō)非受控組件–>應(yīng)用場(chǎng)景

受控組件：

簡(jiǎn)單來(lái)講，就是受我們控制的組件，組件的狀態(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>	}
}

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

非受控組件

簡(jiǎn)單來(lái)講，就是不受我們控制的組件，一般情況是在初始化的時(shí)候接受外部數(shù)據(jù)，然后自己在內(nèi)部存儲(chǔ)自身狀態(tài)，當(dāng)需要時(shí)，可以使用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)用場(chǎng)景

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