新版中生命周期示意图
image.png
新版本废弃了三个钩子函数（omponentWillMount、shouldComponentUpdate及componentWillUpdate ）新增了getDerivedStateFromProps、getSnapshotBeforeUpdate
验证getDerivedStateFromProps钩子函数执行顺序
<script type="text/babel">
// 继承类必须写
class Count extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
}
}
add = () => {
const { count } = this.state;
this.setState({
count: count + 1
})
}
static getDerivedStateFromProps() {
console.log('getDerivedStateFromProps')
return {count: 199}
}
render() {
console.log('render执行了')
return (
<div>
<p>{this.state.count}</p>
<button onClick={this.add}>按钮</button>
</div>
)
}
}
ReactDOM.render(<Count />,
document.getElementById('example')
);
</script>
image.png
代码解释： getDerivedStateFromProps钩子函数必须写成静态（static ），必须返回一个state object或者null，如果返回一个state object包含初始化state中的key，则key以钩子函数返回的state object中key为主，并且后续无法更改这个key。该钩子函数参数为props，返回该props即可。使用场景罕见，使用概率极低。
getSnapshotBeforeUpdate钩子函数验证
<script type="text/babel">
// 继承类必须写
class Count extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
}
}
add = () => {
const { count } = this.state;
this.setState({
count: count + 1
})
}
static getDerivedStateFromProps() {
console.log('getDerivedStateFromProps')
return null
}
// 组件更新之前的快照
getSnapshotBeforeUpdate(){
console.log('getSnapshotBeforeUpdate')
return '测试'
}
// 初次渲染传递的props，上一次的state,getSnapshotBeforeUpdate钩子返回的值
componentDidUpdate(preProps,preState,snapshotValue){
console.log('componentDidUpdate',preProps,preState,snapshotValue)
}
render() {
console.log('render执行了')
return (
<div>
<p>{this.state.count}</p>
<button onClick={this.add}>按钮</button>
</div>
)
}
}
ReactDOM.render(<Count count="tom"/>,
document.getElementById('example')
);
</script>
代码解释：getSnapshotBeforeUpdate钩子函数默认需要返回一个value或者null，其中在componentDidUpdate钩子函数中可以接收到初次渲染传递的props，先前的state及getSnapshotBeforeUpdate返回的value值
初次渲染时打印结果：
image.png
点击按钮打印结果：image.png
