[ReactNative] 03--ReactNative的生命周期 & render的Diff算法 & 组件之间的通信

我们在开发ReactNative项目的时候也要留心它的生命周期,比如在某个props属性或者state属性改变的时候判断是否需要更新界面,如何初始化数据,如何利用生命周期解绑事件等等.

首先我们先看下ReactNative的生命周期(借用网上图片):

从图中我们可以看到整个RN组件的生命周期会经历四个阶段: 创建, 实例化, 更新, 销毁.

创建阶段

1. getDefaultProps

   这个阶段主要发生在创建组件的时候,会调用getDefaultProps方法.这个方法会返回一个对象,并缓存,再与父组件指定的props对象合并, 最终赋值给this.props作为该组件的默认属性.

实例化阶段

这个阶段主要发生在实例化组件的时候,也就是第一次绘制组件的时候,完成组件的初始化和加载动作.

1. getInitialState

   初始化组件的state的值,并赋值给this.state属性.

2. componentWillMount

   这个函数在初始化状态之后被调用,然后会调用render方法,来生成对应的虚拟DOM结构,所以我们可以在这个函数中做一些业务逻辑对state进行对应的操作.

   这个函数在整个生命周期中只会被调用一次.

3. render

   这个函数会根据state的值,生成虚拟DOM结构并返回.

   并且在整个组件生命周期中会被调用多次,当组件的state被改变的时候,系统会监听state属性变化,一旦发生变化,就会主动触发组件的render方法刷新界面.

4. componentDidMount

   这个函数会对render函数生成的虚拟DOM结构生成真正的DOM结构.

   我们可以在这个函数中获取元素或者子组件,从这个函数开始我们就可以像Web开发一样操作DOM元素.

   通常情况下,我们会在这个函数中进行第一次的网络请求,数据库查询之类的操作.

   这个函数在整个生命周期中只会被调用一次.从这个函数之后,组件就被完全创建出来了,之后就会等待事件触发相关操作.

更新阶段

这个阶段主要发生在用户操作之后或者父组件更新的时候,这个时候会根据相应的行为进行对应的页面结构的调整.这个阶段也会触发一系列事件,执行顺序如下:

1. componentWillReceiveProps(nextProps)

   当组件接收到新的props时,会触发这个函数.我们可以在这个函数中通过this.setState()方法更新state属性,因为在这个函数中设置state是安全的,不会额外触发render方法,我们可以通过这个函数减少额外的render函数的触发.

2. shouldComponentUpdate(nextProps, nextState)

   这个函数用来拦截新的props和state属性,然后判断是否需要更新组件,默认返回true更新组件,如果返回false就不会更新组件.

   我们可以通过这个函数中的nextProps, nextState, this.props, this.state的前后属性的判断,是否需要更新组件,从而能够很明显的提高组件的性能.

3. componentWillUpdate(nextProps, nextState)

   这个函数在shouldComponentUpdate返回true的时候触发,我们可以在这个函数中做一些更新组件之前的操作,比如添加监听之类的操作.

   在这个函数中我们不能使用`this.setState()函数来设置state属性,因为如果触发这个函数的话,就进入无限循环的状态了.

4. render

   在componentWillUpdate之后会调用render方法来更新组件.而其中更新的原理就是通过一系列的diff算法,生成需要更新的虚拟DOM数据.

5. componentDidUpdate

   调用了render更新完成界面之后，会调用componentDidUpdate来得到通知,通常情况我们可以再这个函数中做一些操作,比如去除被销毁的DOM的引用,清除监听之类的.

销毁阶段

1. componentWillUnmount

   这个函数会在组件从DOM中移除的时候被触发,我们可以通过这个函数做一些取消事件绑定等一些操作.

render的Diff算法

通常情况下,如果在界面改变的时候直接更新全部组件的话,性能会大打折扣.而RN在更新界面的时候使用了很高性能的diff算法,来提高性能.

假设我们在一个组件中有2个子组件View1和View2,现在我们需要在2个子组件中添加一个新的子组件View3.

<View>    <View1 />    <View2 /></View>

1. 常规做法: 删除View1和View2,然后依次创建新的View1,View3,View2并插入到父组件中.

2. Diff算法: View1组件不删除,删除View2组件,之后创建并插入View3,最后创建并插入View2.

3. Diff算法2: 如果我们在这3个子组件中都声明key属性的话,最终的实际结果是,View1,View2不变,只会在View2组件之前创建并插入View3.

组件之间的通信

1. 子组件调用父组件的方法

   子组件要拿到父组件中的属性,需要通过this.props方法. 同样子组件想获取父组件的方法,只要父组件把被调用的方法以属性的方式放在子组件上,这样子组件也可以通过this.props.被调用的方法调用到父组件传递过来的方法.

   父组件给子组件属性之后,当父组件修改了传入的属性值,那么子组件也会得到通知,并自动获取到新的属性值

2. 父组件调用子组件的方法

   我们可以通过给子组件设置属性ref=xxx,来显性的暴露子组件,之后我们就可以在父组件中通过调用this.refs.xxx来获取到子组件.

后记

前一段时间,通过学习ReactNative,做了一个小项目simplereader,如果你觉得不错的话,请给个star吧.
准备通过blog将这段时间学习的东西和踩得坑好好总结.
你也可以认为这是一系列的通过项目学习ReactNative的教程,（￣▽￣）感觉自己在给自己挖坑.