首页 > 其他 > 详细

React 生命周期

时间:2018-03-07 23:30:34      阅读:206      评论:0      收藏:0      [点我收藏+]

React生命周期

一、装载(初始化)过程(Mount)

组件第一次在DOM树渲染的过程

1)getDefaultProps() :

ES5中设置默认的props(ES6中defaultProps设置组件的默认的属性)。

2)getInitialState() :

ES5中初始化state,此时可以访问this.props。

3)componentWillMount() :

在组件被挂载前调用,整个生命周期只执行一次。

4)render():

渲染组件,创建虚拟DOM,更新DOM树(不能更改state了),必须实现该方法。

5)componentDidMount():

在组件渲染之后调用,已经生成真实的DOM节点,只执行一次。

 

二、更新过程(Update)

组件被重新渲染的过程(初始化时均不调用)

1)componentWillReceiveProps(nextProps):

父组件的render()方法执行后就会调用。

2)shouldComponentUpdate(nextProps, nextState):

当state或者props改变时调用,返回boolean。若返回true,则继续执行render();若返回false则放弃本次渲染(对于react性能优化非常重要)。

3)componentWillUpdata(nextProps, nextState):

只有在组件将要更新时才调用,此时可以修改state。

4)render():

渲染组件

5)componentDidUpdate():

组件更新完成后调用,此时可以获取dom节点。

 

三、卸载过程(Unmount)

组件从DOM树中删除的过程

1)componentWillUnmount():

组件将要卸载时调用,将组件从DOM树移出,防止内存溢出(如:事件监听、定时器)。

 

React 生命周期

原文:https://www.cnblogs.com/Michelle20180227/p/8525611.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!