react生命周期
2021-10-12 15:02:04 3 举报渲染过程
作者其他创作
大纲/内容
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
0 条评论
下一页
