React 生命週期簡介
React 生命週期（v16之前）
生命週期四階段主要函數
組件初始化(initialization)
- construtor() 可以給 this.state 賦初值
掛載(Mounting)階段
- componentWillMount()：在組件掛載到DOM前調用，且只會被調用一次
- render()：根據組件的 props 和 state 返回一個React元素
- componentDidMount()：組件掛載到DOM後調用，且只會被調用一次
更新(update)階段
卸載(Unmounting)階段
- componentWillUnmount()：組件被卸載前調用，可以在這裏執行一些清理工作
更新(Update)階段
造成組件更新的原因
- 父組件重新render，子組件將直接跟着重新渲染，無論props是否有變化
- 組件本身調用setState，無論state有沒有變化
生命週期函數
componentWillReceiveProps(nextProps)：只調用於props引起的組件更新過程中shouldComponentUpdate(nextProps, nextState)componentWillUpdate(nextProps, nextState) ：調用render方法前執行render()componentDidUpdate(prevProps, prevState)：組件更新後被調用
React 生命週期（v16.4）
新引入的生命週期函數
- getDerivedStateFromProps(props, state)
• 在組件創建時和更新時的 render 方法之前調用
• 它應該返回一個對象來更新狀態，或者返回null來不更新任何內容 - getSnapshotBeforeUpdate(prevProps, prevState)
• 被調用於render之後，可以讀取但無法使用DOM的時候
• 它使組件可以在更改之前從DOM捕獲一些信息（例如滾動位置）
• 返回的任何值都將作爲參數傳遞給componentDidUpdate