国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JS每日一題：react的生命周期有哪些？有什么需要注意的地方?

seanHai / 2553人閱讀

摘要：期的生命周期有哪些有什么需要注意的地方生命周期是什么這里不再累述了，有興趣可以點這里的生命周期這里我們以為準(zhǔn)先上一張圖從圖中我們可以看出來生命周期分為三個部分裝載處理更新處理卸載處理英譯過來叫做裝備，裝配的意思，在這里我們理解為應(yīng)用加載的過

20190304期

react的生命周期有哪些？有什么需要注意的地方?

生命周期是什么這里不再累述了，有興趣可以點這里

react的生命周期

這里我們以react v16.3為準(zhǔn)

先上一張圖

從圖中我們可以看出來react生命周期分為三個部分

mounting 裝載處理

updation 更新處理

ummounting 卸載處理

Mounting

Mounting 英譯過來叫做裝備，裝配的意思，在react這里我們理解為應(yīng)用加載的過程，react在這個階段做了哪些事情我們列舉一下

constructor 主要做些初始化操作，如初始化state、綁定成員的this環(huán)境

getDerivedStateFromPorps 渲染之前都會觸發(fā)

componentDidMount 渲染到頁面中后觸發(fā),這時可以操作ＤＯＭ

Updation

三種情況會觸發(fā)組件更新

props被改變

主動調(diào)用setState 狀態(tài)改變

forceUpdate 強(qiáng)制重新render

這三種情況在react中也會不同的處理,forceUpdate最直接,既然是強(qiáng)制的那么什么好說的，直接進(jìn)入render函數(shù), 當(dāng)props發(fā)生改變時會進(jìn)入 getDerivedStateFromPorps函數(shù)處理完后進(jìn)入shouldComponentUpdate(劃重點，待會要考)更新完后進(jìn)入componentDidUpdate函數(shù)

有同學(xué)應(yīng)該注意到了, 上面劃了一個重點 shouldComponentUpdate, 這里我們解釋一下, 這個也是react中一個可優(yōu)化的點

shouldComponentUpdate 音譯過來我們可以猜出來一點，這個函數(shù)是可以控制組件是否需要更新的

事實也正是如此

場景隨意列舉一個吧, 比如你有一個大列表，這時props里一個與其不相干的屬性發(fā)生變化，
進(jìn)入了你的updation流程，如果你不處理那么你的頁面將會進(jìn)行一次無意義的渲染，這不是我們想要看見的，如果你在shouldComponentUpdate中阻止了流程繼續(xù)往下走，你就減少了頁面的渲染次數(shù)，在react應(yīng)用中用好shouldComponentUpdate這個是很重要的

Unmounting

react 為組件卸載也提供一個函數(shù)

componentWillUnmount 在組件卸載前觸發(fā)

另外還有一個圖上沒有提到的，卻很實用的一個hook

componentDidcatch 當(dāng)組件發(fā)生錯誤觸發(fā)，使用場景很多對吧，調(diào)試，埋點上報都能用上

回顧老版本

在 16.3之前的生命周期可以大家更熟悉，這里就貼一下圖不做累述了

關(guān)于JS每日一題

JS每日一題可以看成是一個語音答題社區(qū)
每天利用碎片時間采用60秒內(nèi)的語音形式來完成當(dāng)天的考題
群主在次日0點推送當(dāng)天的參考答案

注 絕不僅限于完成當(dāng)天任務(wù)，更多是查漏補(bǔ)缺，學(xué)習(xí)群內(nèi)其它同學(xué)優(yōu)秀的答題思路

點擊加入答題

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/102409.html

相關(guān)文章

  • JS每日一題：react中類組件和函數(shù)式組件中有什么不同?

    摘要：期中類組件和函數(shù)式組件中有什么不同在中創(chuàng)建組件的形式有三種純函數(shù)式定義的無狀態(tài)組件定義的組件定義的組件今天我們要聊的是純函數(shù)式定義的無狀態(tài)組件及類組件的到底有什么不同分別在什么場景下適合使用首先我們來看一下用上述方法如何來創(chuàng)建一個組件定義的 20190306期 react中類組件和函數(shù)式組件中有什么不同? 在react中創(chuàng)建組件的形式有三種 純函數(shù)式定義的無狀態(tài)組件 React.cr...

    Java_oldboy 評論0 收藏0

  • JS每日一題：Vue-router有哪些鉤子？使用場景？

    摘要：問有哪些鉤子使用場景的實現(xiàn)可以點這里前面我們用大白話講過什么是鉤子，這里在重復(fù)一下，就是在什么什么之前什么什么之后英文叫專業(yè)點叫生命周期，裝逼點可以叫守衛(wèi)中也存在鉤子的概念分為三步記憶全局守衛(wèi)路由獨享守衛(wèi)組件獨享守衛(wèi)全局守衛(wèi)很好理解，全 20190218問 Vue-router有哪些鉤子？使用場景？ router的實現(xiàn)可以點這里 前面我們用大白話講過什么是鉤子，這里在重復(fù)一下，就是在...

    張金寶 評論0 收藏0

  • JS每日一題:Webpack有哪些常見的Plugin？他們是解決什么問題的

    摘要：期有哪些常見的他們是解決什么問題的定義音譯過來就是插件在中插件目的在于解決無法實現(xiàn)的其他事插件是一個具有屬性的對象。 20190327期 Webpack有哪些常見的Plugin？他們是解決什么問題的 定義: 音譯過來就是插件, 在webpack中, 插件目的在于解決 loader 無法實現(xiàn)的其他事 webpack 插件是一個具有 apply 屬性的 JavaScript 對象。appl...

    songze 評論0 收藏0

  • React 328道最全面試題(持續(xù)更新)

    摘要：希望大家在這浮夸的前端圈里，保持冷靜，堅持每天花分鐘來學(xué)習(xí)與思考。 今天的React題沒有太多的故事…… 半個月前出了248個Vue的知識點，受到很多朋友的關(guān)注，都強(qiáng)烈要求再出多些React相前的面試題，受到大家的邀請，我又找了20多個React的使用者，他們給出了328道React的面試題，由我整理好發(fā)給大家，同時發(fā)布在了前端面試每日3+1的React專題，希望對大家有所幫助，同時大...

    kumfo 評論0 收藏0

  • JS每日一題: Vue中mixin怎么理解？

    摘要：兩個對象鍵名沖突時，取組件對象的鍵值對也使用同樣的策略進(jìn)行合并。代碼理解全局混合也可以全局注冊混合對象。注意使用一旦使用全局混合對象，將會影響到所有之后創(chuàng)建的實例為自定義的選項注入一個處理器。 20190122 Vue中mixin怎么理解？ mixin是為了讓可復(fù)用的功能靈活的混入到當(dāng)前組件中，混合的對象可以包含任意組件選項（生命周期，指令之類等等）, mixin翻譯過來叫混合,高級的...

    jubincn 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<