概述
所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解空间的生命周期,是开发中必须掌握的一个知识点。就像 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进行区分。