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 (
            
                属性初始值：{this.props.value} {'\n'} 状态初始值：{this.state.value}

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 (
      Hello {this.props.name}!
    );
  }
}

export default class LotsOfGreetings extends Component {
  render() {
    return (
      
        
      
    );
  }
}

II. state

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

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

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

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