ReactNative ☞ react-native 生命周期

一、单个组件的生命周期

单个React组件生命周期示意图

首先分析一下单个组件的生命周期，完成的代码如下：

//In App.js
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button} from 'react-native';

type Props = {};
export default class Home extends  Component{

    constructor(props) {
        super(props)
        console.log('Home-constructor');
       this.state = {
            title : '点我刷新'
        }
    }

   componentWillMount(): void {
        console.log('Home-componentWillMount');
    }

    componentWillUnmount(): void {
        console.log('Home-componentWillUnmount');
    }

    render() {
       console.log('Home-render');
        return (
            <View style={styles.container}>
              <Text>首页</Text>
              <Button
                  title={this.state.title}
                  onPress={()=> this.setState({title : '刷新成功'})}
             />
           </View>
         )
     }
     componentDidMount(): void {
        console.log('Home-componentDidMount');
     }

     shouldComponentUpdate(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): boolean {
        console.log('Home-shouldComponentUpdate');
        return (
            true
         )
     }

     componentWillReceiveProps(nextProps) {
         console.log('Home-componentWillReceiveProps')
     }

     componentWillUpdate(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): void {
         console.log('Home-componentWillUpdate');
     }

     componentDidUpdate(prevProps: Readonly<P>, prevState:  Readonly<S>, snapshot: SS): void {
          console.log('Home-componentDidUpdate');
     }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
   },
 });

运行结果如下：

运行结果

commend + D 打开Google Chrome浏览器，在浏览器中打印如下：

打印结果

点击刷新按钮，打印如下：

点击刷新按钮

二、多个组件的生命周期

为了模拟多个组件的生命周期，在上述代码的基础上，我们去掉Home组件的export default，重新定义一个名为Super的根视图组件

Super组件定义如下：

export default class Super extends Component<Props> {

    constructor(props) {
        super(props)
        console.log('Super-constructor');
    }

    componentWillMount(): void {
        console.log('Super-componentWillMount');
    }

    componentWillUnmount(): void {
        console.log('Super-componentWillUnmount');
    }

    render() {
        console.log('Super-render');
      return (
       //返回Home组件，此时Home作为子组件
        < Home />
     );
    }

    componentDidMount(): void {
        console.log('Super-componentDidMount');
    }

    shouldComponentUpdate(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): boolean {
        console.log('Super-shouldComponentUpdate');
        return (
            true
        )
    }

   componentWillReceiveProps(nextProps) {
        console.log('Super-componentWillReceiveProps')
    }

   componentWillUpdate(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): void {
        console.log('Super-componentWillUpdate');
    }

   componentDidUpdate(prevProps: Readonly<P>, prevState: Readonly<S>, snapshot: SS): void {
        console.log('Super-componentDidUpdate');
    }

}

运行上述代码
打印如下：

多个组件运行结果

此时再点击Home组件上的按钮，打印如下

点击子组件按钮