基于web的網(wǎng)站開發(fā)技術(shù)路線seo優(yōu)化的基本流程
在react中說(shuō)說(shuō)對(duì)受控組件和非受控組件的理解?以及應(yīng)用場(chǎng)景
- 回答思路:說(shuō)說(shuō)受控組件-->說(shuō)說(shuō)非受控組件-->應(yīng)用場(chǎng)景
- 受控組件:
- 非受控組件
- 應(yīng)用場(chǎng)景
回答思路:說(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本身處理,但更加方便快捷,代碼量少
特征 | 不受控組件 | 受控組件 |
---|---|---|
一次性取值,如提交時(shí) | √ | √ |
提交時(shí)驗(yàn)證 | √ | √ |
即時(shí)現(xiàn)場(chǎng)驗(yàn)證 | × | √ |
有條件地禁用提交按鈕 | × | √ |
強(qiáng)制輸入格式 | × | √ |
一個(gè)數(shù)據(jù)的多個(gè)輸入 | × | √ |
動(dòng)態(tài)輸入 | × | √ |