RN 页面生命周期

一、流程图

二、生命周期详解

RN组件的生命周期大致可分为三大部分

加载 ➨运行 ➨卸载

1.加载

getDefaultProps

在组件创建之前，会先调用
getDefaultProps()，这是全局调用一次，严格地来说，这不是组件的生命周期的一部分。在组件被创建并加载候，首先调用
getInitialState()，来初始化组件的状态。

constructor（旧：getInitalState）

contructor将在任意一个RN组件被加载之前优先调用，并且只会调用一次。 该函数最大的作用是定义该组件当中需要使用的状态机变量 。

componentWillMount

该函数整个过程中只执行一次，该函数会在初始渲染前执行，即在render被调用之前调用，该函数执行后render就会调用。
如果在render中改变了某些状态机变量，那么RN不会执行渲染，而是等待该函数执行完毕后再次渲染。
子组件中同样拥有该方法，并会在父组件执行完毕后执行，该函数无返回值。
该函数适合于需要在本地读取一些数据用于显示，那么在render执行前调用是一个很好的时机。

render

调用该方法，先对状态机变量与属性进行检查。 如果开发者不想渲染界面的话，可以在此处返回null或者false。
该方法适用于进行界面的JSX代码编写，因此不适合在此处对状态机变量进行修改或者访问服务器。

componentDidMount

该函数会在render渲染完毕之后调用，整个过程只执行一次。 该函数执行后，开发者就可以对界面上的组件或者子组件进行各种操作了。
该函数的应用场景适用于在移动端应用启动之后需要访问网络进行某些数据获取。

2.运行

componentWillReceiveProps

当props(属性)发生改变或者接受到新的props时，该函数被调用，并接受一个输入参数，类型为Object，存放新的props，原先反生改变的旧的props仍然可以通过this.props访问。
该函数在RN初次被渲染的时候不会被调用。 如果在该函数当中对状态机变量进行了修改，RN不会立即渲染页面，而是会等待该方法执行完毕后一起渲染。

shouldComponentUpdate

当props(属性)或者状态(state)发生改变的时候会触发该函数，分别对应接收的两个参数，根据返回的布尔值来决定是否需要对页面进行重新渲染，如果不进行渲染，那么该方法后续的componentWillUpdate与componentDidUpdate都不会被执行。
该函数默认会返回true。

componentWillUpdate

在接收到新的 props 或者 state 之前立刻调用。 该方法原型与上一方法相同，在重新渲染前会调用该方法，为渲染进行准备工作。

componentDidUpdate

在组件的更新已经同步到 DOM 中之后立刻被调用。 该函数会在重新渲染render之后调用，传入上个方法必须的两个参数即可。

3.卸载

componentWillUnmount

该方法会在RN卸载之前调用，无参无返回值，在该方法中，需要对该组件当中申请或者订阅的某些资源与消息进行释放。
在该方法中执行任何必要的清理，比如无效的定时器，或者清除在 componentDidMount 中创建的 DOM 元素。

三、代码

import React from 'react';

import {
    View, Text, TouchableWithoutFeedback
} from 'react-native';

const tag = "PageDemo";

export default class PageDemo extends React.Component{

    //构造函数
    constructor(props) {
        super(props);

        console.log(tag," -----  constructor -----  ");

        this.state = {
            demoValue: 0,
        }

        this.didFocusListener = this.props.navigation.addListener(// 回到当前页面或者第一次进来
            'didFocus',
            () => {
                console.log(tag," -----  didFocus -----  ");
            }
        );

        this.didBlurListener = this.props.navigation.addListener(//去往其他rn页面  相邻页面跳转 前面一个页面的onBlur先执行，后面一个页面的onFocus后执行
            'didBlur',
            () => {
                console.log(tag," -----  didBlur -----  ");
            }
        );
    }

    //即将加载，render之前
    componentWillMount(){
        console.log(tag," -----  componentWillMount -----  ");
    }

    render() {
        return (
            <TouchableWithoutFeedback
                onPress={() => {
                    let demoValue = this.state.demoValue + 1;
                    this.setState({demoValue: demoValue})
                }} >

                <View style={{backgroundColor:'green'}} >
                    <Text>
                        如果你喜欢在Web上使用React，那你也肯定会喜欢React Native.
                    </Text>

                </View>
            </TouchableWithoutFeedback>
        )
    }

    //加载完成，render之后
    componentDidMount() {
        console.log(tag," -----  componentDidMount -----  ");
    }

    //当props发生改变时
    componentWillReceiveProps(nextProps) {
        console.log(tag," -----  componentWillReceiveProps-当props发生改变时 ----- ")
    }

    //组件是否更新
    shouldComponentUpdate(nextProps, nextState) {
        console.log(tag," -----  shouldComponentUpdate-组件是否跟新 ----- ")
        //默认返回true让它更新
        return true;
    }

    //组件更新前调用
    componentWillUpdate(nextProps, nextState) {
        console.log(tag," -----  componentWillUpdate-组件跟新前调用 ----- ")
    }

    //组件更新后调用
    componentDidUpdate(prevProps, prevState) {
        console.log(tag," -----  componentDidUpdate-组件跟新后调用 ----- ")
    }

    //销毁:组件移除前调用
    componentWillUnmount() {
        console.log(tag," -----  componentWillUnmount-组件移除前调用 ----- ")
    }

}

四、日志输出

PageDemo  -----  constructor -----  
PageDemo  -----  componentWillMount -----  
PageDemo  -----  componentDidMount -----  
PageDemo  -----  didFocus -----  

PageDemo  -----  shouldComponentUpdate-组件是否更新 ----- 
PageDemo  -----  componentWillUpdate-组件更新前调用 ----- 
PageDemo  -----  componentDidUpdate-组件更新后调用 ----- 

PageDemo  -----  componentWillUnmount-组件移除前调用 ----- 
PageDemo  -----  didBlur -----  

五、参考

https://blog.csdn.net/Tomasyb/article/details/71680342
https://blog.csdn.net/pkaq_/article/details/51281381
https://blog.csdn.net/weixin_44889245/article/details/109744409