React Native Component生命周期

1). 生命周期相关函数

2). 执行流程

I. 首次进入：componentWillMount -> render -> componentDidMount
II. 改变state：shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate
III. 改变props：componentWillReceiveProps -> shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate
IV. 页面销毁：componentWillUnmount

3). 测试代码

import React, {Component} from 'react';
import {
    Button,
    StyleSheet, Text,
    View
} from 'react-native';

/**
 * @FileName: ComponentLifecycle
 * @Author: mazaiting
 * @Date: 2018/6/13
 * @Description: 组件的声明周期
 */
class ComponentLifecycle extends Component {
    /**
     * 1. 定义属性的默认值
     * 调用时使用this.props.value
     * @type {{value: string}}
     */
    static defaultProps = {
        value: 'mazaiting'
    };
    
    /**
     * 2. 构造函数
     * @param props
     */
    constructor(props) {
        super(props);
        /**
         * 初始化状态
         * @type {{value: string}}
         */
        this.state = {
            value: 'initial state.'
        }
    }
    
    /**
     * 3. 挂载组件，该函数在组件的声明周期中只执行一次
     */
    componentWillMount() {
        console.log('componentWillMount')
    }
    
    /**
     * 4. 渲染界面
     */
    render() {
        console.log('render');
        return (
            <View style={styles.container}>
                <Text>属性初始值：{this.props.value} {'\n'} 状态初始值：{this.state.value}</Text>
                <Button
                    title={'改变state'}
                    onPress={() => {
                        this.setState({value: 'changed'})
                    }}
                />
            </View>
        )
    }
    
    /**
     * 5. 完成组件挂载，该函数在组件的声明周期中只执行一次
     */
    componentDidMount() {
        console.log('componentDidMount')
    }
    
    /**
     * 组件渲染完成，接收到新的props时，函数被调用
     * @param nextProps 新配置
     */
    componentWillReceiveProps(nextProps) {
        console.log('componentWillReceiveProps：' + nextProps.value)
    }
    
    /**
     * PureComponent不能重写此方法，只能在Component中重写
     * 组件接收到新的state或props时，函数被调用
     * @param nextProps 新的配置
     * @param nextState 新的状态
     * @return 是否重新渲染本组件
     */
    shouldComponentUpdate(nextProps, nextState) {
        console.log('shouldComponentUpdate');
        return true
    }
    
    /**
     * 准备更新组件
     * @param nextProps 新配置
     * @param nextState 新状态
     */
    componentWillUpdate(nextProps, nextState) {
        console.log('componentWillUpdate')
    }
    
    /**
     * 组件更新完成
     * @param prevProps 之前的配置
     * @param prevState 之前的状态
     */
    componentDidUpdate(prevProps, prevState) {
        console.log('componentDidUpdate')
    }
    
    /**
     * 组件被卸载之前调用
     */
    componentWillUnmount() {
        console.log('componentWillUnmount')
    }
}

/**
 * 样式属性
 */
const styles = StyleSheet.create({
    container: {
        backgroundColor: '#DDD'
    }
});

/**
 * 测试改变ComponentLifecycle组件的props后的回调函数是否执行
 */
class ComponentLifecycleWrapper extends Component {
    state={
        value: 'from parent'
    };
    render() {
        return(
            <View style={styles.container}>
                <ComponentLifecycle {...this.state}/>
                <Button
                    title='改变props'
                    onPress={() => {
                        this.setState({
                            value: 'changed'
                        })
                    }}
                />
            </View>
        )
    }
}

AppRegistry.registerComponent('abcd', () => ComponentLifecycleWrapper);

4). 界面

图1.png

5). 首次进入

图2.png

6). 改变state

图3.png

7). 改变props

图4.png

8). 整个的一个流程

图5.png

9). state(状态) 和 props(属性)

React Native使用state和props来控制组件
I. props

• 属性静态指定

    static defaultProps = {
        value: 'mazaiting'
    };

• 属性动态传入

class Greeting extends Component {
  render() {
    return (
      <Text>Hello {this.props.name}!</Text>
    );
  }
}

export default class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Greeting name='Rexxar' />
      </View>
    );
  }
}

II. state

• 初始化
  在构造函数中去初始化state

    constructor(props) {
        super(props);
        /**
         * 初始化状态
         * @type {{value: string}}
         */
        this.state = {
            value: 'initial state.'
        }
    }

• 修改值
  在组件中使用this.setState()方法来修改状态值，当状态被修改后，界面会被自动更新

    this.setState({value: 'changed'})

React 生命周期--官网地址

代码下载