React生命周期学习笔记
2019-11-02 18:46:21 24 举报登录查看完整内容
React生命周期是React组件从创建到销毁的过程，包括挂载、更新和卸载三个阶段。在挂载阶段，组件会被插入到DOM中并调用componentWillMount、render和componentDidMount方法；在更新阶段，组件会重新渲染并调用shouldComponentUpdate、componentWillUpdate和componentDidUpdate方法；在卸载阶段，组件会被从DOM中移除并调用componentWillUnmount方法。掌握React生命周期可以帮助我们更好地管理组件的状态和行为，提高应用的性能和稳定性。
作者其他创作
大纲/内容
组件创建阶段的生命周期函数
componentDidUpdate
this.state = { }
组件的虚拟DOM元素，将要挂载到页面上的时候执行，此时虚拟DOM还没有被创建；同时还没有挂载到页面中
componentWillMount
数据发生变化，重新渲染内存中的虚拟DOM
组件运行阶段的生命周期函数
shouldComponentUpdate
初始化组件的私有数据，定义在组件的contructor构造器函数中
开始
state 改变
执行该函数的时候，已经开始渲染虚拟DOM，当该函数执行完毕的时候，虚拟DOM已经在内存中创建完成，但是此时并没有挂载到页面中去
结束
通过状态或者属性的变化，都能触发组件更新
属性（props）改变
运行中
render
componentWillUpdate
componentWillReceiveProps
true
static default props = { }
false
组件是否需要被更新
卸载阶段（Unmount）
render执行完毕，虚拟DOM数已经和组件的state保持一致，但是此刻的页面仍然是原来的状态
componentDidMount
此刻组件完成更新，页面状态也同时变为最新
组件即将被更新
该阶段组件将要被卸载，但是仍然可以使用
组件完成挂载，此刻state中的数据，内存中的虚拟DOM ，以及所呈现的页面已经保持一致; 至此，组件创建阶段执行的生命周期函数完毕，页面一次渲染完成。
componentWillUnmount
组件即将接收到新的props属性
作用：初始化 props 默认值，防止组件中某些必须的属性，在外界没有传递值进来的时候，报错
收藏
0 条评论
回复 删除
下一页
