React Native Component生命周期

1). 生命周期相关函数

函数	说明
void componentWillMount()	该函数只会被执行一次，在初始化渲染之前执行，它执行完成之后，render函数会马上被React Native框架调用
ReactClass render()	该函数会被执行多次，返回我们的UI组件信息
void componentDidMount()	该函数之后执行一次，在组件初始化渲染完成之后被调用
void componentWillReceiveProps(nextProps)	ReactNative组件收到新的props时，这个函数会被回调，回调的参数nextProps就是新的props
bool shouldComponentUpdate(nextProps, nextState)	ReactNative组件收到新的props或者新的state时，这个函数将被调用，它接收2个参数，第一个是新的props,第二个是新的state，这个函数还需要返回一个bool值，用来告诉ReactNative框架针对这次改变，ReactNative是否需要重新渲染本组件
void componentWillUpdate(nextProps, nextState)	在ReactNative框架重新渲染ReactNative组件之前会调用这个函数。开发者可以在和这个函数中为即将发生的重新渲染做一些准备，但开发者不能在这个函数中通过this.setState再次改变状态机变量的值
void componentDidUpdate(prevProps, prevState)	React Native框架在重新渲染ReactNative组件完成之后调用这个函数，传入两个参数时渲染前的props和state
void componentWillUnmount()	在React Native组件被卸载之前这个函数将执行

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 生命周期--官网地址

代码下载