码迷,mamicode.com
首页 > 其他好文 > 详细

React 生命周期

时间:2018-03-08 00:08:08      阅读:162      评论:0      收藏:0      [点我收藏+]

标签:ext   lstat   dcom   enter   定时   log   date()   方法   修改   

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 生命周期

标签:ext   lstat   dcom   enter   定时   log   date()   方法   修改   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!