React Native组件生命周期

brownleopard 发布于6月前 阅读12011次
0 条评论

概述

所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解空间的生命周期,是开发中必须掌握的一个知识点。就像 Android 开发中组件 一样,React Native的组件也有生命周期(Lifecycle)。
React Native组件的生命周期大致上可以划分为实例化阶段、存在阶段和销毁阶段。我们只有在理解组件生命周期的基础上,才能开发出高性能的app。
React Native中组件的生命周期大致可以用以下图表示:
这里写图片描述
如图:

  • 第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化;
  • 第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个阶段组件可以处理用户交互,或者接收事件更新界面;
  • 第三阶段:是组件卸载消亡的阶段,如图中右下角的虚线框中,这里做一些组件的清理工作。

生命周期分析

实例化阶段分析

getDefaultProps
该函数用于初始化一些默认的属性,通常会将固定的内容放在这个函数 中进行初始化和赋值;
在组件创建之前,会先调用 getDefaultProps()初始化一些属性,由于组件初始化后,再次使用该组件不会调用getDefaultProps(),所以组件自己不可以自己修改props。
getInitialState
该函数是用于对组件的一些状态进行初始化;
该函数不同于getDefaultProps,在以后的过程中,可以再次调用。
比如:

this.setState({ activePage: activePage, currentX: contentOffSetX });

注:一旦调用了this.setState方法,组件一定会调用render方法,对组件进行再次的渲染,不过,如果React框架会自动根据DOM的状态来判断是否需要真正的渲染。
componentWillMount
这个函数调用时机是在组件创建,并初始化了状态之后,在第一次绘制 render() 之前。这个函数在整个生命周期中只被调用一次。
render是一个组件中必须有的方法,本质上是一个函数,并返回JSX或其他组件来构成DOM,和Android的XML布局类似。作用是通知系统准备加载组件。
componentDidMount
该方法是在调用了render方法后,通知组件已经加载完成。一般会在这个函数中处理网络请求等加载数据的操作;

存在期阶段分析

componentWillReceiveProps
如果组件收到新的属性(props),就会调用 componentWillReceiveProps()对组件的props或state进行了修改。
旧的属性还是可以通过 this.props 来获取,通过调用 this.setState() 来更新你的组件状态,这里调用更新状态是安全的,并不会触发额外的 render() 调用。
shouldComponentUpdate
当组件接收到新的属性和状态改变的话,都会触发调用 shouldComponentUpdate(…),通过返回false或true来控制是否进行界面的渲染。如果 true 表示需要更新,继续走后面的更新流程。否者,则不更新,直接进入等待状态。

componentWillUpdate
如果组件状态或者属性改变,并且上面的 shouldComponentUpdate() 返回为 true,就会开始准更新组件,并调用 componentWillUpdate(),组件刷新前调用,有点类似于componentWillMount()。
componentDidUpdate
调用了 render() 更新完成界面之后,会调用 componentDidUpdate() 来得到通知,其函数原型如下:

void componentDidUpdate(  
  object prevProps, object prevState
)

销毁期阶段分析

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

总结

生命周期 调用次数 能否使用 setSate()
getDefaultProps 全局调用1次
getInitialState 1
componentWillMount 1
render >=1
componentDidMount 1
componentWillReceiveProps >=0
shouldComponentUpdate >=0
componentWillUpdate >=0
componentDidUpdate >=0
componentWillUnmount 1

补充

什么是DOM Diff算法

Web界面由DOM树来构成,当其中某一部分发生变化时,其实就是对应的某个DOM节点发生了变化。在React中,构建UI界面的思路是由当前状态决定界面。前后两个状态就对应两套界面,然后由React来比较两个界面的区别,’这就需要对DOM树进行Diff算法分析。
即给定任意两棵树,找到最少的转换步骤。但是标准的的Diff算法复杂度需要O(n^3),这显然无法满足性能要求。要达到每次界面都可以整体刷新界面的目的,势必需要对算法进行优化。这看上去非常有难度,然而Facebook工程师却做到了,他们结合Web界面的特点做出了两个简单的假设,使得Diff算法复杂度直接降低到O(n)两个相同组件产生类似的DOM结构,不同的组件产生不同的DOM结构;对于同一层次的一组子节点,它们可以通过唯一的id进行区分。

查看原文:React Native组件生命周期

 

需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。