react常問面試題

1.在生命周期的哪一步發(fā)起ajax請(qǐng)求?

我一般是在 ComponentDidMount中。

解釋:

之所以推薦在componentDidMount鉤子中使用而不是componentWillMount 的原因:
因?yàn)檎?qǐng)求是異步的,效果上放在哪都一樣,但是DidMount中可以使用refs。
官方也是推薦在componentDidMount中進(jìn)行請(qǐng)求,當(dāng)然放在willMount中可能會(huì)快一點(diǎn),畢竟先運(yùn)行嘛。

2.當(dāng)組件發(fā)生更新時(shí),組件的生命周期調(diào)用順序

componentWillReceivProps-shouldComponentUpdate-componentWillUpdata- render - componentDidUpdate

組件收到新的props(props中的數(shù)據(jù)并不一定真正發(fā)生變化)—>決定是否需要繼續(xù)執(zhí)行更新過程 —>組件重新計(jì)算出新的虛擬Dom —> 虛擬Dom對(duì)應(yīng)的真實(shí)Dom更新到真實(shí)Dom樹中

3.react生命周期中,最適合與服務(wù)端進(jìn)行數(shù)據(jù)交互的是哪個(gè)函數(shù)?

componentDidMount:在這個(gè)階段,實(shí)例和dom已經(jīng)掛載完成,可以進(jìn)行相關(guān)的dom操作

4.shouldComponentUpdate 是做什么的,react 性能優(yōu)化是哪個(gè)周期函數(shù)?

shouldComponentUpdate 允許我們手動(dòng)地判斷是否要進(jìn)行組件更新,根據(jù)組件的應(yīng)用場(chǎng)景設(shè)置函數(shù)的合理返回值能夠幫我們避免不必要的更新

比如:

我們知道父級(jí)組件的render函數(shù)的重新渲染會(huì)引發(fā)子組件的render方法的重新渲染,但是有的時(shí)候子組件接收父組件的數(shù)據(jù)沒有變動(dòng)。子組件render的執(zhí)行就會(huì)影響性能

5.觸發(fā)多少次setstate,那么render會(huì)執(zhí)行幾次?

多次setState會(huì)合并為一次render,因?yàn)閟etState并不會(huì)立即改變state的值,而是將其放到一個(gè)任務(wù)隊(duì)列里,最終將多個(gè)setState合并,一次性更新頁面。所以我們可以在代碼里多次調(diào)用setState,每次只需要關(guān)注當(dāng)前修改的字段即可

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 作為一個(gè)合格的開發(fā)者,不要只滿足于編寫了可以運(yùn)行的代碼。而要了解代碼背后的工作原理;不要只滿足于自己的程序...
    六個(gè)周閱讀 8,674評(píng)論 1 33
  • 說在前面 關(guān)于 react 的總結(jié)過去半年就一直碎碎念著要搞起來,各(wo)種(tai)原(lan)因(le)。心...
    陳嘻嘻啊閱讀 7,029評(píng)論 7 41
  • 40、React 什么是React?React 是一個(gè)用于構(gòu)建用戶界面的框架(采用的是MVC模式):集中處理VIE...
    萌妹撒閱讀 1,184評(píng)論 0 1
  • 生命周期流程圖簡(jiǎn)單如下: 組件讓你把用戶界面分成獨(dú)立的,可重復(fù)使用的部分,并且將每個(gè)部分分開考慮。React.Co...
    Simple_Learn閱讀 1,189評(píng)論 0 0
  • React 中 keys 的作用是什么? Keys 是 React 用于追蹤哪些列表中元素被修改、被添加或者被移除...
    e2ee31170666閱讀 1,349評(píng)論 1 3

友情鏈接更多精彩內(nèi)容