React Native 入门(十) - 组件的生命周期

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

当前 RN 版本:0.49
操作环境:Windows 10

组件的生命周期展示了它从被创建到销毁的过程。无论在什么平台上,组件总是有它自己的生命周期,对于移动开发者来说生命周期肯定不陌生了。为了更好的管理组件的生命周期,我们需要了解在生命周期的哪些阶段执行了哪些方法

生命周期的各个阶段

首先,我们通过一个流程图来大致了解组件的生命周期,然后根据流程一步一步走完组件的生命周期。

类被创建

Mounting:组件挂载,已插入真实 DOM

  • constructor(props):构造方法,在组件挂载之前调用一次,一般在这里初始化 state 。

  • componentWillMount():在 render 之前调用,即便组件多次被渲染,也只会执行一次。

  • render():渲染组件并返回一个虚拟 DOM 。

  • componentDidMount():在 render 之后调用,在生命周期中该方法也只会执行一次。React 会使用 render 方法返回的虚拟 DOM 对象创建真实的 DOM 结构,可以在这个方法中读取 DOM 节点。

Updating:组件更新,正在被重新渲染

  • componentWillReceiveProps(object nextProps): 已加载完成的组件接收到新的 props 时调用。可以在这个方法里面更新 state 。

  • shouldComponentUpdate(object nextProps,object nextState):在接收到新的 props 或者 state,将要重新渲染之前调用。该方法在初始化渲染的时候不会调用,在使用 forceUpdate 方法的时候也不会。如果确定新的 props 和 state 不会导致组件更新,则此处应该返回 false,后三个方法将不会执行。

  • componentWillUpdate(object nextProps,object nextState):在组件接收到了新的 props 或者 state 即将进行重新渲染前调用,注意不要在此方法里再去更新 props 或者 state 。

  • render():重新渲染组件。

  • componentDidUpdate(object prevProps,object prevState):在组件的更新完成已经同步到 DOM 中之后立刻被调用。该方法不会在初始化渲染的时候调用。可以在这里访问并修改 DOM。

Unmounting:组件移除,已移出真实 DOM

  • componentWillUnmount():在组件从 DOM 中移除的时候立刻被调用

合理地管理组件的生命周期,可以给编程带来很大的便利。比如在在 componentDidMount()注册一些监听,在 componentWillUnmount() 中执行一些清理,移除监听、定时器等。

文章同步自简书:http://www.jianshu.com/p/55c3d9a9e560

原文链接:https://www.f2er.com/react/302453.html

猜你在找的React相关文章