ReactNative – 组件的生命周期

前端之家收集整理的这篇文章主要介绍了ReactNative – 组件的生命周期前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

ReactNative – 组件的生命周期

如同Android的Activity一样,React中的组件也有自己的生命周期。首先看下面这张图:

* 上面第一个虚线框内是React组件被绘制的阶段,组件被加载和初始化
* 左下角的虚线框内是组件的交互状态,在这里处理交互动作,更新UI
* 右下角是组件被销毁前的阶段,主要有一些清理的工作

下面依次讲下每个方法都是何时被调用

  • object getDefaultProps()
    在组件类创建的时候调用一次,然后返回值被缓存下来。全局调用一次,所有实例共享。

  • object getInitialState()
    在组件挂载之前调用一次。返回值将会作为 this.state 的初始值。

  • componentWillMount ()
    在初始化渲染执行之前立刻调用

  • ReactComponent render()
    这个方法是必须的,对视图进行渲染,你也可以返回 null 或者 false 来表明不需要渲染任何东西

  • componentDidMount()
    在初始化渲染执行之后立刻调用一次

  • componentWillReceiveProps(object nextProps)
    在组件接收到新的 props 的时候调用,也就是父组件修改子组件的属性时触发。在初始化渲染的时候,该方法不会调用。可以用于更新 state 来响应某个 prop 的改变。

  • boolean shouldComponentUpdate(object nextProps,object nextState)
    在接收到新的 props 或者 state,将要渲染之前调用,如果确定新的 props 和 state 不会导致组件更新,则此处应该 返回 false。返回true将进行渲染。

  • componentWillUpdate(object nextProps,object nextState)
    在接收到新的 props 或者 state 并且shouldComponentUpdate返回true时调用

  • componentDidUpdate(object prevProps,object prevState)
    在组件的更新已经同步到 DOM 中之后立刻被调用

  • componentWillUnmount() 在组件从 DOM 中移除的时候立刻被调用。在该方法中执行任何必要的清理,比如无效的定时器,或者清除在 componentDidMount 中创建的 DOM 元素。

猜你在找的React相关文章