了解React生命周期事件及如何使用它們。
React類組件可以綁定幾個生命周期事件。
鉤子(Hooks)也允許函數組件以不同的方式訪問它們。
在組件的生命周期中,有一系列的事件被調用,你可以在每個事件上添加自定義功能。
在哪個生命周期事件上添加哪個鉤子是我們接下來要研究的內容。
首先,React組件的生命周期有3個階段:
- 加載
- 更新
- 卸載
讓我們詳細看一下這3個階段以及每個階段調用的方法。
加載
在加載時,在組件被加載到DOM之前,有4個生命周期方法:constructor
、getDerivedStateFromProps
、render
和componentDidMount
。
constructor
constructor是組件加載時第一個呼叫的方法。
通常你使用constructor來設置初始狀態,使用this.state = ...
。
getDerivedStateFromProps()
當狀態依賴於屬性時,可以使用getDerivedStateFromProps根據屬性值更新狀態。
它在React 16.3中添加,旨在代替被棄用的componentWillReceiveProps
方法。
在這個方法中,你沒有訪問this
,因為它是一個靜態方法。
它是一個純方法,所以它不應該引起副作用,並且在使用相同輸入多次呼叫時應該返回相同的輸出。
返回帶有更新後的狀態元素的對象(如果狀態未更改則為null)
render()
從render()方法中,你返回構建該組件界面的JSX。
它是一個純方法,所以它不應該引起副作用,並且在使用相同輸入多次呼叫時應該返回相同的輸出。
componentDidMount()
這個方法是用於執行API調用或在DOM上進行操作的地方。
更新
當更新時,在組件被加載到DOM之前,有5個生命周期方法:getDerivedStateFromProps
、shouldComponentUpdate
、render
、getSnapshotBeforeUpdate
和componentDidUpdate
。
getDerivedStateFromProps()
參見上述描述。
shouldComponentUpdate()
此方法返回一個布林值,true
或false
。你使用這個方法告訴React是否應該繼續重新渲染,默認為true
。在重新渲染的成本較高且你希望更控制何時發生重新渲染時,你會返回false
。
render()
參見上述描述。
getSnapshotBeforeUpdate()
在這個方法中,你可以訪問上一次渲染和當前渲染的props和state。
它的使用案例非常特殊,可能是你使用最少的一個。
componentDidUpdate()
此方法在組件在DOM中更新後呼叫。使用它來運行任何第三方DOM API或在DOM更改時必須更新的API。
它對應於加載階段的componentDidMount()
方法。
卸載
在此階段,我們只有一個方法,componentWillUnmount
。
componentWillUnmount()
當組件從DOM中被刪除時,調用此方法。使用它來執行任何所需的清理工作。
舊版
如果你正在開發一個使用了componentWillMount
、componentWillReceiveProps
或componentWillUpdate
的應用程序,這些方法在React 16.3中已被棄用,你應該遷移到其他生命周期方法。