React-生命周期

一、React V16.3之前的生命周期

二、React V16.4之后的生命周期

React V17可能会废弃的三个生命周期：
(1)componentWillMount
(2)componentWillUpdate
(3)componentWillReviceProps
目前如果使用的话在前面加上UNSAFE_
引入两个新的生命周期：
(1)static getDerivedStateFormProps
(2)getSnapshotBeforeUpdate

三、两个比较：

1、初始化：

前：constructor—>componentWillMount—>render—>componentDidMount
后：constructor—>getDerivedStateFromProps—>render—>componentDidMount

2、state改变：

前：
shouldComponentUpdate—(true)—>componentWillUpdate—>render—>componentDidUpdate
shouldComponentUpdate—(false)
后：
getDerivedStateFromProps—>shouldComponentUpdate—(true)—>render—>getSnapshotBeforeUpdate—>componentDidUpdate
getDerivedStateFromProps—>shouldComponentUpdate—(false)

3、props改变：

前：
componentWillReceiveProps—>shouldComponentUpdate—(true)—>componentWillUpdate—>render—>componentDidUpdate
componentWillReceiveProps—>shouldComponentUpdate—(false)
后：
getDerivedStateFromProps—>shouldComponentUpdate—(true)—>render—>getSnapshotBeforeUpdate—>componentDidUpdate
getDerivedStateFromProps—>shouldComponentUpdate—(false)

4、卸载：

componentWillUnmount