千锋教育web前端高频面试题视频教程，kerwin大话前端面试秘籍（附答案）

一.（017）React的生命周期（新版）

（1）、初次渲染阶段

该阶段涉及到的生命周期钩子分别有

1）、constructor（在该钩子中可以定义数据模型）

2）、static getDerivedStateProps（该钩子中可以对数据模型进行拦截处理，作用相当于axios中的响应拦截器）

3）、render（该钩子为渲染函数，作用为渲染视图，当数据模型变化后，也会重新渲染视图）

4）、componentDidMount（该钩子相似与vue中的Mounted，在该钩子中主要是用来发送请求和获取初次渲染的DOM节点）

（2）、更新阶段

1）、static getDerivedStateProps（该钩子中可以对数据模型进行拦截处理，作用相当于axios中的响应拦截器）

2）、shouldComponentUpdate（该钩子通过return来判断你是否是要更新）

3）、render（该钩子为渲染函数，作用为渲染视图，当数据模型变化后，也会重新渲染视图）

4）、getSnapshotBeforeUpdate（该钩子可以认为是一个快照，它可以记录保存更新前的数据）

5）、componentDidUpdate（在该钩子中可以获取到更新后的DOM节点，与vue中的Updated钩子相似）

（3）、卸载阶段

1）、componentWillUnMount（该钩子中主要是用来清除定时器或解除事件绑定，类似于vue中的destroyed钩子）

二、生命周期钩子的组合使用

（1）、可以在constructor中设置一个用户进入的时间，在componentWillUnMount中设置一个时间，记录用户离开的时间，计算两者的时间戳，获得用户在页面中停留的时间，上传给后台服务器，来分析用户的喜好。

（2）、当用户离开页面时在componentWillUnMount钩子中把用户离开时在页面的滚轮高度记录下来，当用户再次进入该页面时，在componentDidMount钩子中把滚轮高度重新赋给数据模型，让用户进来后还是在该位置，实现类似于keep-alive的作用

（3）、当用户在完一些简单的游戏，比如2048时，当用户离开游戏时，我们可以把用户此时的数据（游戏数据）在componentWillUnMount钩子中保存下来，当用户再次进入游戏的时候，我们在getSnapshotBeforeUpdate钩子中把用户之前的游戏数据重新赋值给模型，实现类似于游戏缓存的功能。