React 生命周期
2.static getDerivedStateFromProps(props,state)
1.static getDerivedStateFromProps(props,state)
2.shouldComponentUpdate(nextProps, nextState)
3.componentWillUpdata(nextProps, nextState)
2.shouldComponentUpdate(nextProps,nextState)
3.componentWillUpdate(nextProps,nextState)
在React中,每個組件提供了生命周期鉤子函數去響應組件在不同時刻應該做的和可以做的事情.組件的掛載>數據更新階段>卸載階段
由于React 16版本中對生命周期有所更改,所以這里介紹新老版本,現在一般不建議使用React15版本的,會報安全性警告
React將組件渲染 > 構造DOM > 展示到頁面的過程稱為組件的掛載.
constructor()是ES6中類的默認方法,通過new命令生成對象實例時自動調用該方法.其中的super()是class方法中的繼承,它是使用extends關鍵字來實現的.子類必須在constructor()中調用super()方法,否則新建實例會報錯.如果沒有用到constructor(),React會默認添加一個空的constructor()`
constructor()用來做一些組件初始化的工作,比如定義this.state的初始內容,繼承父類獲取props
classBaseWorldextendsReact.Component{constructor(props){super(props);this.state={name:'liuqiao'};}render(){console.log(this.props);return(<div>{this.state.name}</div>);}}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2.static getDerivedStateFromProps(props,state)
組件在裝載的時候,也就是組件在構建之后(虛擬DOM之后,實際DOM掛載之前),每次獲取新的props或state之后,當props更改時觸發,然后返回的對象將會與當前的狀態合并,作為新的state,返回null則說明不需要更新state.
staticgetDerivedStateFromProps(){console.log('getDerivedStateFromProps');returnnull;}
1
2
3
4
第一次的初始化組件以及后續的更新過程中(包括自身狀態更新以及父傳子)都會觸發此生命周期. 一般不怎么使用這個鉤子函數
非常重要的鉤子函數.React最重要的步驟,創建虛擬dom,進行diff算法,更新dom樹都會在此進行.
render(){console.log('render');return(<div></div>);}
1
2
3
4
5
6
7
組件渲染之后,只調用一次,非常重要:表示dom準備就緒,動態數據請求已經初始化完成
componentDidMount(){console.log('----componentDidMount');// 開啟長連接// 開定時器// 調接口}
1
2
3
4
5
6
1.static getDerivedStateFromProps(props,state)
只要props或state有更新,就會觸發這個鉤子函數,不常用
2.shouldComponentUpdate(nextProps, nextState)
用于判斷組件是否需要更新.也就是相當于diff運算的開關,一般我們會在此鉤子函數中進行相關的性能優化,比如我們設置在此對比前后兩個props和states是否相同,如果相同則返回false阻止更新.因為相同的屬性狀態一定會生成相同的dom樹，這樣就不需要創造新的dom樹和舊的dom樹進行diff算法對比，節省大量性能，尤其是在dom結構復雜的時候
組件接受新的state或者props時調用.默認情況下,該方法返回true,當返回值為false時,則不再向下執行其他生命周期方法.
3.componentWillUpdata(nextProps, nextState)
組件加載時不調用，只有在組件將要更新時才調用，此時可以修改state
最后一次更改props和state的機會,組件將要更新的時候觸發
重新再渲染一遍組件,更新dom樹
在最近的更改被提交到DOM元素前，render()之后,使得組件可以在更改之前獲得當前值，此生命周期返回的任意值都會傳給componentDidUpdate()的第三個參數。’,不常用’
dom更新完成時,更新DOM節點的操作可放在這里進行。
shouldComponentUpdate()>render()>getSnapshotBeforeUpdate()>componentDidUpdate()
static getDerivedStateFromProps()>shouldComponentUpdate()>render()>getSnapshotBeforeUpdate()>componentDidUpdate()
在組件卸載之前調用,可以在此方法中執行任何需要清理的工作,比如定時器,事件回收,取消網絡請求等等,或者清理在componentDidMount()中創建的任何監聽事件等
componentDidMount(){console.log('componentDidMount');// 開啟長連接// 開定時器// 調接口this.timer=setTimeout(()=>{console.log('開啟定時器');},1000);}//組件卸載階段componentWillUnmount(){this.timer&&clearTimeout(this.timer);}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
在渲染期間,生命周期方法或構造函數constructor()中發生錯誤時,將會調用componentDidCatch()方法
componentDidCatch(error,info){}
1
2
3
不會處理捕獲到下面引發的錯誤
componentDidCatch()本身錯誤
服務端渲染(SSR)
事件處理,因為事件處理不發生在React渲染時,報錯不影響渲染
異步代碼
很多團隊還沒有更新到16版本,所以16版本之前的生命周期還是需要知道的.不過16版本也是基于之前的修改的,只不過是添加了幾個鉤子函數和棄用了幾個鉤子函數
加載的時候調用一次,可以初始化state,也可以接收props
設置默認的props,也可以用defaultProps設置組件的默認屬性
初始化state,可以直接在constructor()中定義this.state
組件加載時只調用,以后組件更新不調用,整個生命周期只調用一次,此時可以修改state
創建虛擬dom,進行diff運算,更新dom樹都在此進行
組件渲染之后值調用一次
組件加載時不調用,組件接受新的props時調用
2.shouldComponentUpdate(nextProps,nextState)
組件接受到新的props或者state時調用,return true會更新dom,使用diff算法更新,return false阻止更新(不調用render) 性能優化的關鍵一環
3.componentWillUpdate(nextProps,nextState)
組件加載時不調用,只有組件在更新時才調用,此時可以修改state
創建虛擬dom,diff運算,更新dom樹
組件更新完成后調用
在組件卸載之前調用,清理定時器,事件回收,釋放某些東西時使用
importReactfrom'react';exportdefaultclassOldLifeextendsReact.Component{constructor(props){super(props);//getDefaultProps: 接收初始props//getInitialState: 初始化state}state={}componentWillMount(){//組件掛載前觸發}render(){return(<div></div>);}componentDidMount(){//組件掛載完成后觸發}componentWillReceiveProps(nextProps){//接收到新的props時觸發}shouldComponentUpdate(nextProps,nextState){//進行性能優化? returntrue;}componentDidUpdate(){//組件更新后觸發}componentWillUnmount(){//卸載時觸發//this.timer&&clearTimeout(this.time}}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
React16新的生命周期棄用了componentWillMount,componentWillReceiveProps,componentWillUpdate
新增了?getDerivedStateFromProps,getSnapshotBeforeUpdate來代替棄用的三個鉤子函數componentWillMount,componentWillReceiveProps,componentWillUpdate
React16并沒有刪除這三個鉤子函數,但是不能和新的鉤子函getDerivedStateFromProps,getSnapshotBeforeUpdate數混用,React17將會刪除componentWillMount,componentWillReceiveProps,omponentWillUpdate
新增了對錯誤的處理?componentDidCatch
老版本生命周期圖示:
新版本生命周期圖示:
