面試題
1霹菊、React中的生命周期有哪些剧蚣？
constructor
componentWillMount
render
componentDidMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
componentWillUnmount
2、React中組件第一次執(zhí)行的時(shí)候會(huì)執(zhí)行哪些生命周期函數(shù)
constructor
componentWillMount
render
componentDidMount
3旋廷、render函數(shù)什么時(shí)候會(huì)執(zhí)行鸠按？
當(dāng)this.state/this.props發(fā)生改變的時(shí)候
4、當(dāng)this.props/this.state發(fā)生改變的時(shí)候會(huì)執(zhí)行哪些生命周期
this.props
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
this.state
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
5饶碘、React中哪些生命周期會(huì)執(zhí)行一次目尖，哪些生命周期會(huì)執(zhí)行多次
多次
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
一次
constructor
componentWillMount
componentDidMount
componentWillUnmount
1、constructor:
1扎运、組件的初始化瑟曲，用來(lái)定義當(dāng)前組件所需要的一些狀態(tài)，狀態(tài)定義在this.state中豪治。
2洞拨、當(dāng)前生命周期中必須書寫super，否則this的指向會(huì)發(fā)生錯(cuò)誤以及報(bào)錯(cuò)
3鬼吵、在當(dāng)前生命周期中默認(rèn)是訪問(wèn)不到props屬性的，如果想要進(jìn)行訪問(wèn)必須在super以及constructor中添加參數(shù)props
2篮赢、componentWillMount:
掛載前：
1齿椅、可以進(jìn)行前后端數(shù)據(jù)的請(qǐng)求(在服務(wù)端渲染的時(shí)候)
2、可以在數(shù)據(jù)第一次被渲染的時(shí)候做數(shù)據(jù)的更改
3启泣、在當(dāng)前生命周期中盡量不要調(diào)用this.setState因?yàn)楫?dāng)前生命周期函數(shù)執(zhí)行完畢后涣脚，會(huì)自動(dòng)執(zhí)行render函數(shù)
4、可以將外部的數(shù)據(jù)轉(zhuǎn)換為內(nèi)部的數(shù)據(jù)
注意:當(dāng)前生命周期在17.0中已經(jīng)廢除掉了
3寥茫、render：
1遣蚀、當(dāng)前生命周期用來(lái)進(jìn)行數(shù)據(jù)與模板的結(jié)合
2、render函數(shù)第一次執(zhí)行的時(shí)候會(huì)將渲染的數(shù)據(jù)在內(nèi)存中保存一份，當(dāng)?shù)诙螖?shù)據(jù)發(fā)生了改變后芭梯，render會(huì)將這次的虛擬DOM與緩存中的虛擬DOM進(jìn)行對(duì)比 這種對(duì)比叫做DIFF算法
3险耀、只要this.state/this.props發(fā)生了改變那么render函數(shù)就會(huì)執(zhí)行
4、componentDidMount：
掛載后：
1玖喘、當(dāng)前生命周期我們可以做前后端數(shù)據(jù)的交互
2甩牺、可以在當(dāng)前生命周期中獲取到真實(shí)的DOM 通過(guò)this.refs來(lái)獲取
3、一般情況下我們都在當(dāng)前生命周期中做一些插件的實(shí)例化new Swiper('')
操作真實(shí)DOM的方式
ref="h2" this.refs.h2
ref={(el)=>{this.dom = el}} this.dom
5累奈、 componentWillReceiveProps
1贬派、當(dāng)this.props發(fā)生改變的時(shí)候當(dāng)前函數(shù)就會(huì)執(zhí)行
2、當(dāng)前函數(shù)中會(huì)有一個(gè)參數(shù) 這個(gè)參數(shù)是一個(gè)新的props
3澎媒、在當(dāng)前生命周期函數(shù)中我們可以對(duì)新的props做修改
注意：當(dāng)前生命周期函數(shù)在17.0中廢除掉了
6搞乏、shouldComponentUpdate
1、當(dāng)this.state/this.props被修改的時(shí)候會(huì)執(zhí)行當(dāng)前生命周期函數(shù)
2戒努、當(dāng)前生命周期執(zhí)行的時(shí)候必須返回一個(gè)true或者是false 返回值決定了render函數(shù)是否會(huì)執(zhí)行请敦，如果為true則render函數(shù)執(zhí)行，false則render函數(shù)不會(huì)執(zhí)行
3柏卤、如果返回值為true則下面的生命周期會(huì)執(zhí)行冬三，如果為false則下面的生命周期不會(huì)執(zhí)行
4、當(dāng)前生命周期特別重要缘缚，因?yàn)楫?dāng)前生命可以做React的性能優(yōu)化,(根據(jù)比較新舊的state/props來(lái)進(jìn)行對(duì)比)
5勾笆、當(dāng)前生命周期函數(shù)中有2個(gè)參數(shù)一個(gè)是新的props 一個(gè)是新的state
shouldComponentUpdate(newProps,newState) {
console.log("shouldComponentUpdate")
// if(this.state.message == newState.message){
// return false;
// }else{
// return true;
// }
return true;
}
6、當(dāng)期生命周期決定的是render函數(shù)是否執(zhí)行桥滨，而不是數(shù)據(jù)是否修改
7窝爪、 componentWillUpdate
更新前：
1、在當(dāng)前生命周期中我們可以對(duì)更新的數(shù)據(jù)做最后的修改
2齐媒、當(dāng)前生命周期中有2個(gè)參數(shù) 一個(gè)是新的props一個(gè)是新的state
8蒲每、 componentDidUpdate:
更新后
1、當(dāng)前生命周期中我們可以獲取到數(shù)據(jù)更新后最新的DOM結(jié)構(gòu)
2喻括、注意當(dāng)前生命周期會(huì)執(zhí)行多次邀杏，所以當(dāng)你需要做業(yè)務(wù)邏輯操作的時(shí)候一定要判斷
9、 componentWillUnmount:
卸載
1唬血、當(dāng)前生命周期執(zhí)行的時(shí)候我們需要做事件的解綁
2望蜡、數(shù)據(jù)的移除等操作
