React 生命周期

组件的生命周期

挂载

组件实例被创建并在插入DOM中时（注意：不是之后，也不是之前，是插入时。），生命周期如下：

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

更新

当组件的props或state发生变化时触发更新。更新时生命周期调用如下：

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

卸载

组件从DOM中移除时，生命周期如下：

• componentWillUnmount()

错误处理

当渲染过程，生命周期，或自组件构造函数中抛出错误时，会调用如下方法：

• static getDerivedStateFromError()
• componentDidCatch()

React生命周期图

Vue生命周期图

对比

对比生命周期图可以看出：

• react的设计是将生命周期按照功能分成了三个部分，每个部分都有自己的调用函数。
• vue的设计是将生命周期按照时间的方式进行排列调用的，更像是从时间开始到结束的过程。 所以在学习两个框架的时候要注意区分，不要按照一种思路学习，而是两种不同思路学习。

总结

• constructor中不能使用setState修改state
• componentDidMount：发起网络请求获取数据，添加订阅。 这里暂时总结这两个，之后会补充更多的相关注意事项。