前端不得不知道的，React新舊生命週期梳理

React v16.3前生命週期：

在聊React v16.3版本的生命週期更新以前，讓咱們先來回顧一下老的生命週期，以下是React 生命週期一覽圖：

須要注意的幾點：

• shouldComponentUpdate在props和state更新時都會出發，返回true則繼續更新，返回false不更新，是能夠提高應用性能的生命週期函數；
• 在更新階段的幾個生命週期中不能用setState，(shouldComponentUpdate,componentWillUpdate,render,componentDidUpdate)容易形成無限循環，除非經過某些判斷停下來；

React v16.3生命週期：

React v16.3 不是React的大版本更新，卻有了生命週期的大改動，即新增了兩個生命週期：

• getDerivedStateFromProps
• getSnapshotBeforeUpdate

deprecate了三個生命週期（三個帶will的）：

• componentWillMount
• componentWillUpdate
• componentWillReceiveProps

變動原因

原來（React v16.0前）的生命週期在React v16推出Fiber以後就不合適了，由於若是要開啓async rendering，在render函數以前的全部函數，都有可能被執行屢次。

禁止不能用比勸導開發者不要這樣用的效果更好，因此除了shouldComponentUpdate，其餘在render函數以前的全部函數（componentWillMount，componentWillReceiveProps，componentWillUpdate）都被getDerivedStateFromProps替代。

若是在v16.3後的版本使用三個被禁用的生命週期，在其前面須要加上UNSAFE__，而在v17版本有可能直接被幹掉沒法使用。

React v16.4生命週期：

16.3和16.4的生命週期一覽圖：http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

相比以前的版本，修改了getDerivedStateFromProps，使其在props，state變化和forceUpdate時都更新，這樣這個生命週期理解起來更容易一些。

getDerivedStateFromProps

static getDerivedStateFromProps(props, state)

getDerivedStateFromProps 會在調用 render 方法以前調用，而且在初始掛載及後續更新時都會被調用。它應返回一個對象來更新 state，若是返回 null 則不更新任何內容。

咱們知道getDerivedStateFromProps是一個靜態函數，在其中是沒法訪問到組件實例的，也就是強制開發者在render以前只作無反作用的操做，而是根據props和state決定新的state，僅此而已。

getSnapshotBeforeUpdate

getSnapshotBeforeUpdate(prevProps, prevState)

getSnapshotBeforeUpdate() 在最近一次渲染輸出（提交到 DOM 節點）以前調用。它使得組件能在發生更改以前從 DOM 中捕獲一些信息（例如，滾動位置）。今生命週期的任何返回值將做爲參數傳遞給 componentDidUpdate(prevProps, prevState, snapshot)。