我们在开发ReactNative项目的时候也要留心它的生命周期,比如在某个props属性或者state属性改变的时候判断是否需要更新界面,如何初始化数据,如何利用生命周期解绑事件等等.
首先我们先看下ReactNative的生命周期(借用网上图片):
从图中我们可以看到整个RN组件的生命周期会经历四个阶段: 创建, 实例化, 更新, 销毁.
创建阶段
-
getDefaultProps这个阶段主要发生在创建组件的时候,会调用
getDefaultProps方法.这个方法会返回一个对象,并缓存,再与父组件指定的props对象合并, 最终赋值给this.props作为该组件的默认属性.
实例化阶段
这个阶段主要发生在实例化组件的时候,也就是第一次绘制组件的时候,完成组件的初始化和加载动作.
-
getInitialState初始化组件的state的值,并赋值给
this.state属性. -
componentWillMount这个函数在初始化状态之后被调用,然后会调用
render方法,来生成对应的虚拟DOM结构,所以我们可以在这个函数中做一些业务逻辑对state进行对应的操作.这个函数在整个生命周期中只会被调用一次.
-
render这个函数会根据state的值,生成虚拟DOM结构并返回.
并且在整个组件生命周期中会被调用多次,当组件的state被改变的时候,系统会监听state属性变化,一旦发生变化,就会主动触发组件的
render方法刷新界面. -
componentDidMount这个函数会对
render函数生成的虚拟DOM结构生成真正的DOM结构.我们可以在这个函数中获取元素或者子组件,从这个函数开始我们就可以像Web开发一样操作DOM元素.
通常情况下,我们会在这个函数中进行第一次的网络请求,数据库查询之类的操作.
这个函数在整个生命周期中只会被调用一次.从这个函数之后,组件就被完全创建出来了,之后就会等待事件触发相关操作.
更新阶段
这个阶段主要发生在用户操作之后或者父组件更新的时候,这个时候会根据相应的行为进行对应的页面结构的调整.这个阶段也会触发一系列事件,执行顺序如下:
-
componentWillReceiveProps(nextProps)当组件接收到新的props时,会触发这个函数.我们可以在这个函数中通过
this.setState()方法更新state属性,因为在这个函数中设置state是安全的,不会额外触发render方法,我们可以通过这个函数减少额外的render函数的触发. -
shouldComponentUpdate(nextProps, nextState)这个函数用来拦截新的props和state属性,然后判断是否需要更新组件,默认返回true更新组件,如果返回false就不会更新组件.
我们可以通过这个函数中的
nextProps, nextState, this.props, this.state的前后属性的判断,是否需要更新组件,从而能够很明显的提高组件的性能. -
componentWillUpdate(nextProps, nextState)这个函数在
shouldComponentUpdate返回true的时候触发,我们可以在这个函数中做一些更新组件之前的操作,比如添加监听之类的操作.在这个函数中我们不能使用`this.setState()函数来设置state属性,因为如果触发这个函数的话,就进入无限循环的状态了.
-
render在
componentWillUpdate之后会调用render方法来更新组件.而其中更新的原理就是通过一系列的diff算法,生成需要更新的虚拟DOM数据. -
componentDidUpdate调用了
render更新完成界面之后，会调用componentDidUpdate来得到通知,通常情况我们可以再这个函数中做一些操作,比如去除被销毁的DOM的引用,清除监听之类的.
销毁阶段
-
componentWillUnmount这个函数会在组件从DOM中移除的时候被触发,我们可以通过这个函数做一些取消事件绑定等一些操作.
render的Diff算法
通常情况下,如果在界面改变的时候直接更新全部组件的话,性能会大打折扣.而RN在更新界面的时候使用了很高性能的diff算法,来提高性能.
假设我们在一个组件中有2个子组件View1和View2,现在我们需要在2个子组件中添加一个新的子组件View3.
<View>
<View1 />
<View2 />
</View>
常规做法: 删除
View1和View2,然后依次创建新的View1,View3,View2并插入到父组件中.Diff算法:
View1组件不删除,删除View2组件,之后创建并插入View3,最后创建并插入View2.Diff算法2: 如果我们在这3个子组件中都声明key属性的话,最终的实际结果是,
View1,View2不变,只会在View2组件之前创建并插入View3.
组件之间的通信
-
子组件调用父组件的方法
子组件要拿到父组件中的属性,需要通过
this.props方法. 同样子组件想获取父组件的方法,只要父组件把被调用的方法以属性的方式放在子组件上,这样子组件也可以通过this.props.被调用的方法调用到父组件传递过来的方法.父组件给子组件属性之后,当父组件修改了传入的属性值,那么子组件也会得到通知,并自动获取到新的属性值
-
父组件调用子组件的方法
我们可以通过给子组件设置属性
ref=xxx,来显性的暴露子组件,之后我们就可以在父组件中通过调用this.refs.xxx来获取到子组件.
后记
前一段时间,通过学习ReactNative,做了一个小项目simplereader,如果你觉得不错的话,请给个star吧.
准备通过blog将这段时间学习的东西和踩得坑好好总结.
你也可以认为这是一系列的通过项目学习ReactNative的教程,（￣▽￣）感觉自己在给自己挖坑.
