React Native 控件生命周期

react native 版本号0.55.4

React Native 生命周期分为三个阶段：

1.初始阶段
2.运行和交互阶段
3.销毁阶段

每个生命周期阶段对应的方法

1.初始阶段

constructor() //构造方法
componentWillMount() //即将记载
componentDidMount() //加载完成

2.运行和交互阶段

componentWillUpdate() //组件个即将更新
render() //组件渲染展示的方法
componentDidUpdate() //组件更新完成

3.销毁阶段

componentWillUnmount（）//组件已被卸载

image.png

代码演示以及日志

1.RN控件的生命周期
执行原理：加载一个页面，将这个页面展示出来，观察rn控件生命周期的运行情况。

import React, {Component} from 'react'
import {Text, View} from 'react-native'
export default class Index extends Component {
    constructor(props) {
        super(props);
        console.log('1.constructor');
    }
    componentWillMount(){
        console.log('2.componentWillMount');
    }
    componentWillUpdate(){
        console.log('3.componentWillUpdate');
    }
    render() {
        console.log('4.render');
        return (
            <View>
                <Text>Hello world!</Text>
            </View>
        )
    }
    componentDidUpdate(prevProps, prevState){
        console.log('5.componentDidUpdate');
    }
    componentDidMount(){
        console.log('6.componentDidMount');
    }
    componentWillUnmount(){
        console.log('7.componentWillUnmount');
    }
}

加载Index控件生命周期执行的日志如下：

image.png

2.执行增加一个state属性，在componentDidMount的时机更改值。
执行原理：现在加载组件，再在组件加载完成之后，componentDidMount方法中执行更改state值，让组件更新，以达到执行更新组件生命周期的逻辑。

当组件接收到新的属性和状态改变的话，就会调用componentDidUpdate(prevProps, prevState)这个方法
输入参数 nextProps 是即将被设置的属性，旧的属性还是可以通过 this.props 来获取通过调用 this.setState() 来更新，nextState 表示组件即将更新的状态值。这个函数的返回值决定是否需要更新组件，如果 true 表示需要更新，继续走后面的更新流程。否者，则不更新，直接进入等待状态

import React, {Component} from 'react'
import {Text, View} from 'react-native'
export default class Index extends Component {
    constructor(props) {
        super(props);
        console.log('1.constructor');
        this.state={
            data:'hello world! 123'
        }
    }
    componentWillMount(){
        console.log('2.componentWillMount');
    }
    componentWillUpdate(){
        console.log('3.componentWillUpdate');
    }
    render() {
        console.log('4.render');
        return (
            <View>
                <Text>Hello world! {this.state.data}</Text>
            </View>
        )
    }
    componentDidUpdate(prevProps, prevState){
        console.log('5.componentDidUpdate');
    }
    componentDidMount(){
        console.log('6.componentDidMount');
        this.setState({
            data:'hw 123'
        });
    }
    componentWillUnmount(){
        console.log('7.componentWillUnmount');
    }
}

加载Index控件执行state更新的生命周期流程的日志如下：

image.png

测试卸载的逻辑，增加了一个view
执行原理：讲ViewTest组件显展示出来，在组件加载完成之后，在将状态改变，组件更新，将ViewTest不显示，就会执行ViewTest的卸载逻辑。

当组件要被从界面上移除的时候，就会调用componentWillUnmount（）这个方法。在这个函数中，可以做一些组件相关的清理工作，例如取消计时器、网络请求等。

import React, {Component} from 'react'
import {Text, View} from 'react-native'
export default class Index extends Component {
    constructor(props) {
        super(props);
        console.log('1.constructor');
        this.state={
            data:'hello world! 123',
            showViewTest:true
        }
    }
    componentWillMount(){
        console.log('2.componentWillMount');
    }
    componentWillUpdate(){
        console.log('3.componentWillUpdate');
    }
    render() {
        console.log('4.render');
        let v = (<Text>Hello world! </Text>);
        if(this.state.showViewTest){
            v = (<ViewTest/>);
        }
        return (
            <View>
                <Text>Hello world! {this.state.data}</Text>
                {v}
            </View>
        )
    }
    componentDidUpdate(prevProps, prevState){
        console.log('5.componentDidUpdate');
    }
    componentDidMount(){
        console.log('6.componentDidMount');
        this.setState({
            data:'hw 123',
            showViewTest:false
        });
    }
    componentWillUnmount(){
        console.log('7.componentWillUnmount');
    }
}
class ViewTest extends Component {
    constructor(props) {
        super(props);
        console.log('ViewTest---constructor---');
    }
    render() {
        console.log('ViewTest---render---');
        return (<Text>ViewTest! </Text>
        )
    }
    componentWillUnmount(){
        console.log('ViewTest---componentWillUnmount---');
    }
}

加载Index控件执行卸载流程的日志如下：

image.png