博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
附实例!图解React的生命周期及执行顺序
阅读量:6094 次
发布时间:2019-06-20

本文共 2310 字,大约阅读时间需要 7 分钟。

hot3.png

本文由云+社区发表

作者:前端林子

1.七个可选的生命周期

可以结合下图来看:

img

(1) componentWillMount() 仅在render()方法前被调用一次,如果在该方法中调用了setState方法去改变组件的状态值,那么调用render()后,将会直接看到改变过了的状态值,并且不论状态值怎么改变,componentWillMount()都不会再被调用。

(2) componentDidMount() 仅在render()方法后被立即调用一次(客户端),相对于父组件而言,该方法在子组件中会先被调用。如果需要使用一些JaveScript框架或者类似于setInterval()这样的方法,建议在该方法内使用。

(3) ShouldComponentUpdate(object nextProps, object nextState) 在初始渲染调用render()方法时不会被调用,后面在接受到新的state或者props时,在render()方法前被调用。为防止一些潜在的bug,该方法默认总是返回true。如果你确定state及props改变后不需要渲染组件,那么也可以指定返回false,需要注意的是,这样的结果会导致后面的render()、componentWillUpdate()、componentDidUpdate()都不会被调用。

一般的,我们可以通过该函数来优化性能:

一个React项目需要更新一个小组件时,很可能需要父组件更新自己的状态。而一个父组件的重新更新会造成它旗下所有的子组件重新执行render()方法,形成新的虚拟DOM,再用diff算法对新旧虚拟DOM进行结构和属性的比较,决定组件是否需要重新渲染

无疑这样的操作会造成很多的性能浪费,所以我们开发者可以根据项目的业务逻辑,在shouldComponentUpdate()中加入条件判断,从而优化性能

例如React中的就提供了一个PureComponent的类,当我们的组件继承于它时,组件更新时就会默认先比较新旧属性和状态,从而决定组件是否更新。值得注意的是,PureComponent进行的是浅比较,所以组件状态或属性改变时,都需要返回一个新的对象或数组

(4) componentWillReceiveProps(object nextProps) 在初始渲染调用render()方法时不会被调用,当接收到一个新的props时,该方法被调用。我们都知道,如果改变一个状态的值,则会触发render()方法,所以可以在这个方法里调用setState()方法去改变一个状态的值,当该方法接收到新的props时,setState()就可以避免一次额外的render()了。 在这个方法里,尤其需要注意一点,就是接收到新的props一定会触发render()方法,但是render()方法被触发不一定是因为接收到了新的props

(5) componentWillUpdate(object nextProps, object nextState) 在初始渲染调用render()方法时不会被调用,当接收到新的props及state时,在render()方法之前被调用。

不要在此方法再去更新props 或者 state

(6) componentDidUpdate(object prevProps, object prevState) 在初始渲染调用render()方法时不会被调用,当组件更新被刷新到DOM之后被立即调用。

可以在这里访问,并修改 DOM

(7) componentWillUnmount() 在组件从DOM上卸载前被调用,在这个方法里面,我们主要是完成一些清除操作,比如说清除掉一些过时了的定时器等。

2.执行顺序及次数

(1) getDefaultProps(),调用1次

(2) getInitialState(),调用1次

(3) componentWillMount(),调用1次

(4) render(),调用>=1次

(5) componentDidMount():仅客户端,调用1次

(6) componentWillReceiveProps(object nextProps),调用>=0次

(7) ShouldComponentUpdate(object nextProps, object nextState),调用>=0次

(8) componentWillUpdate(object nextProps, object nextState),调用>=0次

(9) render(),调用>=1次

(10) componentDidUpdate(object prevProps, object prevState),调用>=0次

(11) componentWillUnmount(),调用1次

3.实例

我写了一个小demo可直接在浏览器里运行,大家可以通过控制台查看父组件、子组件中的各生命周期调用的顺序:

                                    

点击一次按钮,通过控制台可以看到:

img

4.小结

本文主要是图文结合地介绍了react的生命周期及执行顺序,同时附上了一个实例,可以清楚地看到父组件、子组件的调用顺序。如存在问题,欢迎指正~~~

此文已由腾讯云+社区在各渠道发布

获取更多新鲜技术干货,可以关注我们

转载于:https://my.oschina.net/qcloudcommunity/blog/3009750

你可能感兴趣的文章
【BZOJ】1624: [Usaco2008 Open] Clear And Present Danger 寻宝之路(floyd)
查看>>
cmake总结
查看>>
数据加密插件
查看>>
linux后台运行程序
查看>>
win7 vs2012/2013 编译boost 1.55
查看>>
IIS7如何显示详细错误信息
查看>>
ViewPager切换动画PageTransformer使用
查看>>
coco2d-x 基于视口的地图设计
查看>>
C++文件读写详解(ofstream,ifstream,fstream)
查看>>
Android打包常见错误之Export aborted because fatal lint errors were found
查看>>
Tar打包、压缩与解压缩到指定目录的方法
查看>>
新手如何学习 jQuery?
查看>>
配置spring上下文
查看>>
Python异步IO --- 轻松管理10k+并发连接
查看>>
mysql-python模块编译问题解决
查看>>
java 中getDeclaredFields() 与getFields() 的区别
查看>>
熟练掌握doc命令下的文件操作
查看>>
Oracle中drop user和drop user cascade的区别
查看>>
【Linux】linux经常使用基本命令
查看>>
Java 内存区域和GC机制
查看>>