react生命周期

Renderer

c2

可以将状态变化渲染在视图中

componentWillUpdate

c2变色

p2

p1

c1

fn   将状态变化渲染到视图中

getSnapshotBeforeUpdate

app

shouldComponentUpdate

getDerivedStateFromProps

componenWillUnmount

componentDidCath

首先将fiber树对应的dom渲染到视图中，渲染完成后，开始执行对应的生命周期

3.cpnstructorgDSFP/cWMrender

commit阶段

ReactNative渲染器

UI=Fn(state)

constructor

5.cpnstructorgDSFP/cWMrender

4.进入commit阶段

componentDidUpdate

1.constructorgetDerivedStateFromProps/componentWillMountrender

2.componentDidMount

render

ummount

componentDidMount

4.reconclie算法发现C2变化了，标记变化

error

注：不更新的组件不会触发它的生命周期，但是每次调用this.setState时都会创建一棵完整的fiber树

1.gDSFPrender

4.componentDidMount

updata

render阶段

5.commit阶段6.执行变化对应的视图操作

componentWillMount

Mount

常用ReactDom渲染器

state 计算出状态变化

3.componentDidMount

Reconciler

componentWillReceiveProps

                      2.getSnapshotBeforeUpdatecomponentDidUpdate

创建fiber树的过程 （虚拟dom树）

1.componentDidMount

5.componentDidMount

reconclie算法（diff算法）

this.setState

4.cpnstructorgDSFP/cWMrender

注：在react中同时使用标红和标绿的生命周期会报错

1.调用ReactDOM.render2.进入Render阶段3.采用深度优先遍历创建fiber树（虚拟dom树）

2.cpnstructorgDSFP/cWMrender