React Native 组件生命周期

2016-09-20  本文已影响78人  TaoGeNet

IOS - ViewController 生命周期

init

loadView

viewDidLoad

viewWillApper

viewWillLayoutSubviews

viewDidLayoutSubviews

viewDidApper

viewWillDisapper

viewDidDisapper

(viewWillUnload->viewDidUnload)

dealloc

React Native 组件生命周期

1.创建阶段

getDefaultProps:function(){}

2.实例化阶段

getInitialState:function(){}  //获取this.state的默认值

componentWillMount:function(){}  //render之前调用此方法,业务处理放在此方法中

render:function(){}        //渲染返回一个虚拟DOM

componentDidMount:function(){}  //该方法发生render方法之后。ReactJS会使用render方法返回的虚拟DOM对象来创建真实DOM结构

3.更新阶段

componentWillRecieveProps:función(){}  //该方法发生在this.props被修改或福组件调用setProps()方法之后

shouldComponentUpdate:function(){}  // 是否需要更新

componentWillUpdate:function(){}  //将要更新

componentDidUpdate:function(){}  //更新完毕

4.销毁阶段

componentWillUnmount:function(){}  //销毁

整个ReactJS 的生命周期中,主要经历这4个阶段


创建阶段:

该阶段主要发生在创建组件类的时候,即调用React.createClass。这个阶段只会触发一个getDefaultProps方法,该方法返回一个对象,并缓存下来然后与父组件指定的props对象合并,并最后赋值给this.props作为该组件的默认属性。

实例化阶段:

该阶段主要发生在组件类被调用的时候。这一阶段会触发一系列的流程。

getInitialState 初始化组件的state的值,返回值会赋值组件的this.state属性

componentWillMount 根据业务逻辑来对state进行相应的操作

render 根据state的值,生成页面需要的虚拟DOM结构,并返回该结构。

componentDidMount  对根据虚拟DOM结构而生成真实DOM进行相应的处理。

更新阶段:

该阶段发生在用户操作之后或者父组件有更新的时候,此时会根据用户的操作行为进行相应的页面结构的调整。该阶段发生的一系列流程如下:

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

shouldComponentUpdate(nextProps, nextState) 该方法用来拦截新的props或state。然后根据事先设定好的判断逻辑,做出要不要更新组件的决定。

componentWillUpdate(object nextProps, object nextState) 当步骤shouldComponentUpdate方法中拦截返回true的时候,就可以在该方法中做一些更新之前的操作。

render 根据diff算法,生成需要更新的虚拟DOM数据。

componentDidUpdate 该方法在组件的更新已经同步到DOM中后触发

销毁阶段

componentWillUnmount 当组件从DOM中移除的时候,会触发的方法。我们通常会做一些取消事件绑定、移除虚拟DOM中对应的组件数据结构、销毁一些无效的定时器等工作。


props: 它是一个对象,是组件用来接受外面传来的参数。组建内部是不能够修改自己props属性。只能通过父组件来修改,上面的getDefaultProps方法便是处理props的默认值。

state: 它是组件的属性,主要用来存储组件需要的数据,它是可以改变的。它的每次改变都会引发组件的更新,这是ReactJS中的关键点之一。每次数据的更新都是通过修改state属性的值,然后ReactJS内部会监听state属性的变化,一旦反生变化,就会主动触发组件的render方法来更新DOM结构。




上一篇下一篇

猜你喜欢

热点阅读