React 组件的生命周期详解

概念:在组建的创建、到加载到页面上运行以及组件被销毁的过程中,总是伴随的各种各样的事件,这些在组件特定时期,出触发的事件就叫做 组建的声明周期

组件创建阶段:组件创建阶段的生命周期函数,有一个显著地特点,创建阶段的生命周期函数,在组建的一辈子中只执行一次

组件运行阶段:也有一个显著地特点,根据组件的state和props的改变有选择性的触发0次或多次;

组件销毁阶段:也有一个显著地特点,一辈子只执行一次

组件初始阶段 static defaultProps:初始化props默认值的属性,作用是防止组件中某些必要的属性,外界没有传递报错的问题

组建创建阶段 this.state:是用来初始化组件私有数据的,是定义在组建的constructor构造器函数中,所以this.state会被第一时间就被初始化,因为在Class类中,只要new这个类,必然优先调用constructor构造器 componentWillMount:这个函数,是组建的虚拟DOM元素,将要挂在到页面上的时候执行,此时,虚拟DOM还没有被创建,也没有被挂在到页面上;因为虚拟DOM是在render函数上创建的,所以此时根本还没有虚拟DOM被创建 render:当进入到render函数中执行的时候,就已经开始渲染虚拟DOM了,当执行完render后,此时_在内存中已经创建好了,但是,此时虚拟DOM并没有被挂在到真正的页面上_ componentDidMount:表示组件已经完成了挂载,此时,我们data上的数据,虚拟DOM上的数据以及浏览器页面上的数据保持一致了,到这里,组件创建阶段的生命周期函数已经创建完毕,页面第一次被渲染好

组件运行阶段 componentWillReceiveProps:组件将要接受新的props属性,只有当外界传递给子组件的属性被修改了,才会触发此函数的执行 shouldComponentUpdate:组件是否被更新;状态(state)或者props的改变都能触发此组件的更新 componentUpdate:组件将要被更新,此时组件还没有被更新 render:重新渲染内存中虚拟DOM对象,当render完毕之后,虚拟DOM树已经和组件的state保持一致了,都是最新的了,但是页面还是旧的 componentDidUpdate:此时页面已经更新完了,页面也是最新的了

组件卸载的过程: componentWillUNmount:组件将要被卸载,此时组件尚可使用,还没有被卸载;

以上就是react生命周期函数的详细过程

猜你喜欢

转载自my.oschina.net/u/3419199/blog/1815688