一.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)用铸豁。