React生命周期-学习(一)

React生命图谱

一、挂载

1、constructor

代表过程：完成了React数据的初始化。

2、componentWillMount（即将过时）

代表过程：组件已经经历了constructor() 初始化数据后，但是还未渲染DOM时。在 render() 之前调用，因此在此方法中同步调用 setState() 不会触发额外渲染。

3、getDerivedStateFromProps

代表过程：会在调用 render () 之前调用，并且在初始挂载及后续更新时都会被调用。执行了getDerivedStateFromProps后不会执行componentWillMount。

4、render()

代表过程：初次渲染Dom。

5、componentDidMount

代表过程：会在组件挂载后（插入 DOM 树中）立即调用，组件第一次渲染完成后会调用，此时dom节点已经生成。

二、卸载

componentWillUnmount

代表过程：会在组件卸载及销毁之前直接调用。

三、更新

当组件的 props 或 state 发生变化时会触发更新。

1、componentWillReceiveProps（即将过时）

2、shouldComponentUpdate

代表过程：当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染render执行之前被调用。返回值默认为 true，首次渲染或使用 forceUpdate() 时不会调用该方法。

3、componentWillUpdate（即将过时）

代表过程：在render之前，shouldComponentUpdate之后，如果同时有getSnapshotBeforeUpdate不会执行该函数。

4、render()

代表过程：重新渲染，render函数会插入jsx生成的dom结构，react会生成一份虚拟dom树，在每一次组件更新时，在此react会通过其diff算法比较更新前后的新旧DOM树，比较以后，找到最小的有差异的DOM节点，并重新渲染。

5、getSnapshotBeforeUpdate

代表过程：在render() 之后，react只会在第一次初始化成功会进入componentDidmount，组件更新完毕后，之后每次重新渲染后都会进入getSnapshotBeforeUpdate。

6、componentDidUpdate

代表过程：在更新后会被立即调用，首次渲染不会执行此方法。