ReactNative组件生命周期

说到生命周期，大家大概也能想到就是创建、销毁、状态改变。RN的组件就是一个状态机。和Native一样，RN也为我们提供相应的钩子函数。RN的状态变化取决于props和state。我们先来看一张经典图。

image.png

getDefaultProps

主要用于初始化组件的属性，这个函数在整个生命周期中只被调用一次。如果父组件传递过来的Props和你在该函数中定义的Props的key一样，将会被覆盖。
ES6之前的getDefaultProps方法，由于props不可变，所以现在被定义为一个属性, 由于是用ES6 class语法创建组件，其内部只允许定义方法，而不能定义属性，class的属性只能定义在class之外.

getInitialstate

组件示例创建的时候调用的第一个函数，这个函数在整个生命周期中只被调用一次。主要用于初始化state。注意：为了在使用中不出现空值，建议初始化state的时候尽可能给每一个可能用到的值都赋一个初始值。

constructors

Es6里面使用该方法，代替getDefaultProps和getInitialState；可以在这个方法里面设置props或者state。

componetentWillMount

准备加载组件，会调用 componentWillMount，这个函数调用时机是在组件创建，并初始化了状态之后，在第一次绘制render()之前。可以在这里做一些业务初始化操作，也可以设置组件状态。这个函数在整个生命周期中只被调用一次。

componetentDidMount

在组件第一次绘制之后，会调用 componentDidMount，通知组件已经加载完成。此时其虚拟 DOM 已经构建完成，可以在这个函数开始获取其中的元素或者子组件了。

componetentWillReceiveProps

如果组件收到新的属性（props），就会调用 componentWillReceiveProps(object nextProps)。输入参数nextProps是即将被设置的属性，旧的属性还是可以通过this.props来获取。在这个回调函数里面，可以根据属性的变化，通过调用this.setState()来更新组件状态，这里调用更新状态是安全的，并不会触发额外的render()调用。

shouldComponentUpdate

当组件接收到新的属性和状态改变的话，都会触发调用 shouldComponentUpdate(object nextProps, object nextState)，输入参数nextProps和上面的 componentWillReceiveProps 函数一样，nextState表示组件即将更新的状态值。这个函数的返回值决定是否需要更新组件，如果 true 表示需要更新，继续走后面的更新流程。否者，则不更新，直接进入等待状态。

componentWillUpdate

如果组件状态或者属性改变，并且上面的 shouldComponentUpdate(...) 返回为 true，就会开始准更新组件，并调用 componentWillUpdate(object nextProps, object nextState)。在这个回调中，可以做一些在更新界面之前要做的事情。需要特别注意的是，在这个函数里面，不能使用 this.setState()来修改状态。这个函数调用之后，就会把nextProps和nextState分别设置到this.props和 this.state中。紧接着这个函数，就会调用 render()来更新界面了。

compoentWillUnmount

如果组件状态或者属性改变，并且上面的 shouldComponentUpdate(...) 返回为 true，就会开始准更新组件，并调用 componentWillUpdate(object nextProps, object nextState)。在这个回调中，可以做一些在更新界面之前要做的事情。需要特别注意的是，在这个函数里面，不能使用 this.setState()来修改状态。这个函数调用之后，就会把nextProps和nextState分别设置到this.props和 this.state中。紧接着这个函数，就会调用 render()来更新界面了。

总结

20200416140152.jpg