React Native组件的生命周期函数

React Native学习之组件的生命周期函数


6342050-41cd58944aa094ea.png

从图中我们就可以看出React Native组件的生命周期大致上分为三个部分:

1)实例化阶段 :组件的加载和初始化

getInitialState 是ES5写法,下面是ES6写法:

constructor(props) {

super(props)

this.state = {

name:"lei"

}

}

componentWillMount() :

这个调用时机是在组件创建,并初始化了状态之后,在第一次绘制 render() 之前。

可以在这里做一些业务初始化操作,也可以设置组件状态。这个函数在整个生命周期中只被调用一次。

render() :

render是一个组件必须有的函数,用来渲染界面。

componentDidMount():

调用了render方法后,会调用 componentDidMount(),通知组件已经加载完成,这个函数调用的时候,其虚拟DOM已经构建完成,你可以在这个函数中获取其中的元素或者子组件了。

2)运行阶段:这个阶段组件可以处理用户交互,或者接收事件更新ui界面

componentWillReceiveProps():

当组件接收到新的props时,会触发该函数。在该函数中,通常可以调用setState()来完成对state的修改操作。

shouldComponentUpdate():

当组件接收到新的属性和状态改变的话,都会触发调用 shouldComponentUpdate(),可以在这里面选择性的更新ui。

componentWillUpdate():

如果组件状态或者属性改变,并且上面的 shouldComponentUpdate(...) 返回为 true,就会开始准更新组件,并调用 该函数。

render():跟上面的一样,更新渲染UI。

componentDidUpdate():

虚拟DOM同步到DOM中后,执行该方法,可以在这个方法中做DOM操作。

3)销毁阶段:组件卸载消亡

componentWillUnmount():

当组件要被从界面上移除的时候,就会调用 componentWillUnmount(),主要做一些清理工作。

先暂时说这么多,理解的不是很深。

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容