React Native组件的生命周期

React Native中的component跟Android中的activity,fragment等一样,存在生命周期,下面先给出component的生命周期图


React Native组件的生命周期_第1张图片

组件的生命周期可分成三个状态:
· Mounting:已插入真实 DOM
· Updating:正在被重新渲染
· Unmounting:已移出真实 DOM

getDefaultProps

object getDefaultProps()

执行过一次后,被创建的类会有缓存,映射的值会存在this.props,前提是这个prop不是父组件指定的
这个方法在对象被创建之前执行,因此不能在方法内调用this.props ,另外,注意任何getDefaultProps()返回的对象在实例中共享,不是复制
getInitialState

object getInitialState()

控件加载之前执行,返回值会被用于state的初始化值
componentWillMount

void componentWillMount()

执行一次,在初始化render之前执行,如果在这个方法内调用setState,render()知道state发生变化,并且只执行一次
render

ReactElement render()

render的时候会调用render()会被调用
调用render()方法时,首先检查this.props和this.state返回一个子元素,子元素可以是DOM组件或者其他自定义复合控件的虚拟实现
如果不想渲染可以返回null或者false,这种场景下,React渲染一个

void componentDidMount()

在初始化render之后只执行一次,在这个方法内,可以访问任何组件,componentDidMount()方法中的子组件在父组件之前执行

从这个函数开始,就可以和 JS 其他框架交互了,例如设置计时 setTimeout 或者 setInterval,或者发起网络请求
shouldComponentUpdate

boolean shouldComponentUpdate(
                              object nextProps, object nextState
                              )

这个方法在初始化render时不会执行,当props或者state发生变化时执行,并且是在render之前,当新的props或者state不需要更新组件时,返回false

shouldComponentUpdate: function(nextProps, nextState) {
  return nextProps.id !== this.props.id;
}

当shouldComponentUpdate方法返回false时,讲不会执行render()方法,componentWillUpdate和componentDidUpdate方法也不会被调用

默认情况下,shouldComponentUpdate方法返回true防止state快速变化时的问题,但是如果·state不变,props只读,可以直接覆盖shouldComponentUpdate用于比较props和state的变化,决定UI是否更新,当组件比较多时,使用这个方法能有效提高应用性能
componentWillUpdate

void componentWillUpdate(
                         object nextProps, object nextState
                         )

componentDidUpdate

void componentDidUpdate(
                        object prevProps, object prevState
                        )

组件更新结束之后执行,在初始化render时不执行
componentWillReceiveProps


void componentWillReceiveProps(
                               object nextProps
                               )

当props发生变化时执行,初始化render时不执行,在这个回调函数里面,你可以根据属性的变化,通过调用this.setState()来更新你的组件状态,旧的属性还是可以通过this.props来获取,这里调用更新状态是安全的,并不会触发额外的render调用


componentWillReceiveProps: function(nextProps) {
  this.setState({
  likesIncreasing: nextProps.likeCount > this.props.likeCount
  });
}

componentWillUnmount

    void componentWillUnmount()  

当组件要被从界面上移除的时候,就会调用componentWillUnmount(),在这个函数中,可以做一些组件相关的清理工作,例如取消计时器、网络请求等
总结

React Native的生命周期就介绍完了,其中最上面的虚线框和右下角的虚线框的方法一定会执行,左下角的方法根据props state是否变化去执行,其中建议只有在componentWillMount,componentDidMount,componentWillReceiveProps方法中可以修改state值

英文地址:https://facebook.github.io/react/docs/component-specs.html#lifecycle-methods

你可能感兴趣的:(React Native组件的生命周期)