React Native 组件生命周期
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结构。