angular1胸懈,angualr2,vue恰响,react(新)生命周期鉤子函數(shù)

一.angular1生命周期鉤子

1.$ ionicView.loaded 視圖已經(jīng)被加載了趣钱,這個事件只發(fā)生一次,視圖被創(chuàng)建并且被添加到DOM中胚宦,當(dāng)視圖跳出后并被緩存的話首有,再次訪問這個視圖這個事件將不會被激活。Loaded事件是個好方式讓你為這個視圖設(shè)置你的代碼枢劝; 然而井联,他并不是我們推薦的事件去監(jiān)聽視圖被激活。

2.$ ionicView.enter   進(jìn)入視圖并被激活您旁。這事件被激活來判斷這個視圖是第一個加載還是被緩存了的烙常。

3.$ ionicView.leave  離開這個視圖并且不是活動頁面。調(diào)用這個事件判斷應(yīng)該被緩存還是摧毀鹤盒。

4.$ionicView.beforeEnter   視圖是即將進(jìn)入并成為活動視圖蚕脏。

5.$ionicView.beforeLeave  視圖將被關(guān)閉并且不是活動頁面。

6.$ionicView.afterEnter  進(jìn)入視圖并是當(dāng)前的活動頁面

7.$ionicView.afterLeave  已經(jīng)離開視圖侦锯,并成為非激活頁面

8.$ionicView.unloaded  視圖的Controller已經(jīng)被摧毀并且他的頁面元素也從Dom中移除


二. angular2生命周期鉤子

ngOnChanges()

當(dāng) Angular(重新)設(shè)置數(shù)據(jù)綁定輸入屬性時響應(yīng)驼鞭。 該方法接受當(dāng)前和上一屬性值的 SimpleChanges 對象

當(dāng)被綁定的輸入屬性的值發(fā)生變化時調(diào)用,首次調(diào)用一定會發(fā)生在 ngOnInit() 之前尺碰。

ngOnInit()

在 Angular 第一次顯示數(shù)據(jù)綁定和設(shè)置指令/組件的輸入屬性之后挣棕,初始化指令/組件译隘。

在第一輪 ngOnChanges() 完成之后調(diào)用,只調(diào)用一次穴张。

ngDoCheck()

檢測细燎,并在發(fā)生 Angular 無法或不愿意自己檢測的變化時作出反應(yīng)。

在每個 Angular 變更檢測周期中調(diào)用皂甘,ngOnChanges() 和 ngOnInit() 之后玻驻。

ngAfterContentInit()

當(dāng)把內(nèi)容投影進(jìn)組件之后調(diào)用。

第一次 ngDoCheck() 之后調(diào)用偿枕,只調(diào)用一次璧瞬。

ngAfterContentChecked()

每次完成被投影組件內(nèi)容的變更檢測之后調(diào)用。

ngAfterContentInit() 和每次 ngDoCheck() 之后調(diào)用

ngAfterViewInit()

初始化完組件視圖及其子視圖之后調(diào)用渐夸。

第一次 ngAfterContentChecked() 之后調(diào)用嗤锉,只調(diào)用一次。

ngAfterViewChecked()

每次做完組件視圖和子視圖的變更檢測之后調(diào)用墓塌。

ngAfterViewInit() 和每次 ngAfterContentChecked() 之后調(diào)用瘟忱。

ngOnDestroy()

當(dāng) Angular 每次銷毀指令/組件之前調(diào)用并清掃。 在這兒反訂閱可觀察對象和分離事件處理器苫幢,以防內(nèi)存泄漏访诱。

在 Angular 銷毀指令/組件之前調(diào)用。

三. vue生命周期鉤子:

四. react生命周期鉤子函數(shù):

執(zhí)行順序

Mounting(加載階段:涉及6個鉤子函數(shù))

constructor()

加載的時候調(diào)用一次韩肝,可以初始化state

getDefaultProps()

設(shè)置默認(rèn)的props触菜,也可以用dufaultProps設(shè)置組件的默認(rèn)屬性。

getInitialState()

初始化state哀峻,可以直接在constructor中定義this.state

componentWillMount()

組件加載時只調(diào)用涡相,以后組件更新不調(diào)用,整個生命周期只調(diào)用一次剩蟀,此時可以修改state

render()

react最重要的步驟催蝗,創(chuàng)建虛擬dom,進(jìn)行diff算法喻旷,更新dom樹都在此進(jìn)行

componentDidMount()

組件渲染之后調(diào)用生逸,只調(diào)用一次

Updating(更新階段:涉及5個鉤子函數(shù))

componentWillReceivePorps(nextProps)

組件加載時不調(diào)用,組件接受新的props時調(diào)用

shouldComponentUpdate(nextProps, nextState)

組件接收到新的props或者state時調(diào)用且预,return?true就會更新dom(使用diff算法更新)槽袄,return?false能阻止更新(不調(diào)用render)

componentWillUpdata(nextProps, nextState)

組件加載時不調(diào)用,只有在組件將要更新時才調(diào)用锋谐,此時可以修改state

render()

react最重要的步驟遍尺,創(chuàng)建虛擬dom,進(jìn)行diff算法涮拗,更新dom樹都在此進(jìn)行

componentDidUpdate()

組件加載時不調(diào)用乾戏,組件更新完成后調(diào)用

Unmounting(卸載階段:涉及1個鉤子函數(shù))

componentWillUnmount()

組件渲染之后調(diào)用迂苛,只調(diào)用一次

函數(shù)

componentWillMount?在渲染前調(diào)用,在客戶端也在服務(wù)端。

componentDidMount?: 在第一次渲染后調(diào)用鼓择,只在客戶端三幻。之后組件已經(jīng)生成了對應(yīng)的DOM結(jié)構(gòu),可以通過this.getDOMNode()來進(jìn)行訪問呐能。 如果你想和其他JavaScript框架一起使用念搬,可以在這個方法中調(diào)用setTimeout, setInterval或者發(fā)送AJAX請求等操作(防止異步操作阻塞UI)。

componentWillReceiveProps?在組件接收到一個新的 prop (更新后)時被調(diào)用摆出。這個方法在初始化render時不會被調(diào)用朗徊。(ps:面試考觸發(fā)條件)

shouldComponentUpdate?返回一個布爾值。在組件接收到新的props或者state時被調(diào)用偎漫。在初始化時或者使用forceUpdate時不被調(diào)用爷恳。

可以在你確認(rèn)不需要更新組件時使用。

componentWillUpdate在組件接收到新的props或者state但還沒有render時被調(diào)用象踊。在初始化時不會被調(diào)用温亲。

componentDidUpdate?在組件完成更新后立即調(diào)用。在初始化時不會被調(diào)用杯矩。

componentWillUnmount在組件從 DOM 中移除之前立刻被調(diào)用铸豁。

ps:

由于未來采用異步渲染機(jī)制,所以即將去掉的生命周期鉤子函數(shù)componentWillMount

componentWillRecieveProps

componentWIllUpdate

新增兩個

static getDerivedStateFromProps會在初始化和update時觸發(fā)菊碟,用于替換componentWillReceiveProps,可以用來控制 props 更新 state 的過程在刺;它返回一個對象表示新的 state逆害;如果不需要更新,返回 null 即可

getSnapshotBeforeUpdate用于替換 componentWillUpdate蚣驼,該函數(shù)會在update后 DOM 更新前被調(diào)用魄幕,用于讀取最新的 DOM 數(shù)據(jù),返回值將作為 componentDidUpdate 的第三個參數(shù)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末颖杏,一起剝皮案震驚了整個濱河市纯陨,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌留储,老刑警劉巖翼抠,帶你破解...
    沈念sama閱讀 222,183評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異获讳,居然都是意外死亡阴颖,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,850評論 3 399
  • 文/潘曉璐 我一進(jìn)店門丐膝,熙熙樓的掌柜王于貴愁眉苦臉地迎上來量愧,“玉大人钾菊,你說我怎么就攤上這事≠怂啵” “怎么了煞烫?”我有些...
    開封第一講書人閱讀 168,766評論 0 361
  • 文/不壞的土叔 我叫張陵,是天一觀的道長累颂。 經(jīng)常有香客問我滞详,道長,這世上最難降的妖魔是什么喘落? 我笑而不...
    開封第一講書人閱讀 59,854評論 1 299
  • 正文 為了忘掉前任茵宪,我火速辦了婚禮,結(jié)果婚禮上瘦棋,老公的妹妹穿的比我還像新娘稀火。我一直安慰自己,他們只是感情好赌朋,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,871評論 6 398
  • 文/花漫 我一把揭開白布凰狞。 她就那樣靜靜地躺著,像睡著了一般沛慢。 火紅的嫁衣襯著肌膚如雪赡若。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,457評論 1 311
  • 那天团甲,我揣著相機(jī)與錄音逾冬,去河邊找鬼。 笑死躺苦,一個胖子當(dāng)著我的面吹牛身腻,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播匹厘,決...
    沈念sama閱讀 40,999評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼嘀趟,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了愈诚?” 一聲冷哼從身側(cè)響起她按,我...
    開封第一講書人閱讀 39,914評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎炕柔,沒想到半個月后酌泰,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,465評論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡汗唱,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,543評論 3 342
  • 正文 我和宋清朗相戀三年宫莱,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片哩罪。...
    茶點(diǎn)故事閱讀 40,675評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡授霸,死狀恐怖巡验,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情碘耳,我是刑警寧澤显设,帶...
    沈念sama閱讀 36,354評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站辛辨,受9級特大地震影響捕捂,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜斗搞,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,029評論 3 335
  • 文/蒙蒙 一指攒、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧僻焚,春花似錦允悦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,514評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至狞山,卻和暖如春全闷,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背萍启。 一陣腳步聲響...
    開封第一講書人閱讀 33,616評論 1 274
  • 我被黑心中介騙來泰國打工总珠, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人勘纯。 一個月前我還...
    沈念sama閱讀 49,091評論 3 378
  • 正文 我出身青樓姚淆,卻偏偏與公主長得像,于是被迫代替她去往敵國和親屡律。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,685評論 2 360

推薦閱讀更多精彩內(nèi)容

  • 什么是生命周期鉤子 簡單點(diǎn)來說生命周期鉤子就是Angular中一個組件從被創(chuàng)建到銷毀期間的一些有意義的關(guān)鍵時刻.這...
    快樂女孩筱梅閱讀 529評論 0 0
  • 大綱 1降淮、angular生命周期是什么2超埋、生命周期鉤子分類3、Angular 2 指令生命周期鉤子的作用及調(diào)用順序...
    前端路上的小兵閱讀 24,461評論 0 10
  • 一佳鳖、生命周期鉤子 每個組件都有一個被 Angular 管理的生命周期霍殴。Angular 創(chuàng)建它,渲染它系吩,創(chuàng)建并渲染它...
    笨蛋小明閱讀 1,384評論 0 0
  • 一:什么是閉包来庭?閉包的用處? (1)閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)穿挨。在本質(zhì)上月弛,閉包就 是將函數(shù)內(nèi)部和函數(shù)外...
    xuguibin閱讀 9,636評論 1 52
  • 極簡修行三年,朋友到我家都會驚呼:“啊厉萝,你家好整潔恍飘!你好勤快、好會收拾谴垫!” 其實(shí)不然章母,我是家務(wù)手殘黨,曾幾何時翩剪,我...
    李李極簡積極人生閱讀 17,302評論 0 45