ReactNative开发——组件的生命周期

ReactNative开发——组件的生命周期

使用ES6语法创建Component

我查看了下网上有关React Native中组件的生命周期有关的资料，发现大多介绍的是 ReactClass.create这种方式创建的Component创建的组件，这种方式创建的组件，生命周期都是先执行和getDefaultProps和 getInitialState。

而我创建Component的方式采用了ES6的写法，自定义class继承自 React.Component的方式。这种方式不支持getDefaultProps和getInitialState这种方式来获取 props和state。而是使用类中的属性来获取。

使用es6的写法：用 static defaultProps 属性代替原先的getDefaultProps获取属性和这种方式；
用state属性代替原先的getInitialState这种方式；

示例：

class Note extends Component {
    constructor() {
        super();
    }

    // getInitialState(){
    //     console.log('getInitialState.');
    //  return this.state的初始值;
    // }
    //
    // getDefaultProps(){
    //     console.log('getDefaultProps.');
    //  return this.props的初始值
    // }
    //
    // 以上2个函数，只能在 React.createClass()方式下使用。
    // 当前使用 extends Component这种方式下，我们用属性 state代替 getInitialState函数，
    // 用 static defaultProps 属性代替 getDefaultProps。
    //

    /**
     * 设置this.props的初始值。
     *
     * @type {{value: string}}
     */
    static defaultProps = {value: 'this is default props'}

    /**
     * 设置this.state的初始值。
     *
     * @type {{value: string}}
     */
    state = {value: 'this is initial state.'}

生命周期图

我画了一张组件的声明周期图，图比较丑~大家别介意哈~，额~ 如果大神有什么好的流程图工具可以留言给我介绍。

声明周期我们将它分成了三部分：
1. 初始化与挂载
执行构造函数->componentWillMount->render->componentDidMount
这个过程在组件的生命周期中只执行一次。等componentDidMount执行完毕之后，组件就进入了运行状态。
2. 运行阶段
当props发生改变后，会先回调componentWillReceiveProps并传入新的props。然后会执行更新界面相关的一系列回调方法。
当state发生改变后，会执行更新相关的回调方法。
更新相关的回掉方法:
1、shouldComponentUpdate 该函数会返回一个bool值用来决定是否需要更新界面。
2、componentWillUpdate 更新前会回调这个函数。
3、render再次执行这个函数，这个函数返回子组件信息。
4、componentDidUpdate 等待更新完成之后回调
3. 卸载阶段
当组件将要被卸载时，回先回调componentWillUnmount函数。

生命周期相关的函数

代码

下面是我测试生命组件生命周期的代码：

/**
 * Created by blueberry on 6/5/2017.
 *
 * 参考源码:ReactClass.js
 */

import React, {Component} from 'react'
import ReactNative, {AppRegistry, View, Text, Button} from 'react-native'

class Note extends Component {
    constructor() {
        super();
    }

    // getInitialState(){
    //     console.log('getInitialState.');
    //  return this.state的初始值;
    // }
    //
    // getDefaultProps(){
    //     console.log('getDefaultProps.');
    //  return this.props的初始值
    // }
    //
    // 以上2个函数，只能在 React.createClass()方式下使用。
    // 当前使用 extends Component这种方式下，我们用属性 state代替 getInitialState函数，
    // 用 static defaultProps 属性代替 getDefaultProps。
    //

    /**
     * 设置this.props的初始值。
     *
     * @type {{value: string}}
     */
    static defaultProps = {value: 'this is default props'}

    /**
     * 设置this.state的初始值。
     *
     * @type {{value: string}}
     */
    state = {value: 'this is initial state.'}

    /**
     * 最先执行的回调函数，该函数在组件的声明周期中只执行一次，这个函数执行完之后，ReactNative马上会调用组件的render方法。
     */
    componentWillMount() {
        console.log('componentWillMount');
    }

    /**
     * 用来渲染界面。
     *
     * @returns {XML}
     */
    render() {
        console.log('render');
        return (
            <View >
                <Text>
                    属性初始值:{this.props.value} {'\n'} 状态初始值:{this.state.value}
                </Text>
                <Button title="改变state" onPress={() => {
                    this.setState({value: 'i changed'})
                }}/>
            </View>
        )
    }

    /**
     * 该函数在组件的声明周期中只执行一次，它在初始化渲染完成之后执行。
     */
    componentDidMount() {
        console.log('componentDidMount');
    }

    /**
     * 在组件渲染完成之后，当reactNative组件接受到新的props时，这个函数将被调用，这个函数接受一个object参数，object里时新的props。
     * @param nextProps 新的props
     */
    componentWillReceiveProps(nextProps) {
        console.log('componentWillReceiveProps' + nextProps.value);
    }

    /**
     * 在组件渲染完成之后，当ReactNative组件接收到新的state或props时，这个函数将被调用。它接收两个object参数，其中第一个是新的
     * props;第二个是新的state。函数还需要返回一个bool值，告诉ReactNative针对这次改变，ReactNative是否需要重新渲染本组件。如果
     * 函数返回false，React Native 将不会重新渲染本组件。
     * @param nextProps 新的props
     * @param nextState 新的state
     * @returns {boolean} 是否需要重新渲染本组件
     */
    shouldComponentUpdate(nextProps, nextState) {
        console.log('shouldComponentUpdate');
        return true;
    }

    /**
     * ReactNative组件初始化渲染完成后，React Native框架在ReactNative组件重新渲染组件前，会调用这个函数。
     * @param nextProps 新的props
     * @param nextState 新的state
     */
    componentWillUpdate(nextProps, nextState) {
        console.log('componentWillUpdate');
    }

    /**
     * ReactNative组件初始化渲染完成之后，ReactNative框架在重新渲染组件完成之后会调用这个函数。
     * @param prevProps 新的props
     * @param prevState 新的state
     */
    componentDidUpdate(prevProps, prevState) {
        console.log('componentDidUpdate');
    }

    /**
     * 在该组件被卸载之前调用。
     * 这个函数没有参数，也不需要返回值。
     */
    componentWillUnmount() {
        console.log('componentWillUnmount');
    }
}

/**
 * 为了测试改变Note 组件的props后的回调函数是否执行，所有定义了一个NoteWrapper类。
 */
export default class NoteWrapper extends Component {

    state = {value: 'from parent'}

    render() {

        return (
            <View style={{backgroundColor: 'grey', flex: 1,}}>
                <Note
                    {...this.state}
                />
                <Button title="改变props" onPress={() => {
                    this.setState({value: 'changed'});
                }}/>
            </View>
        )


    }
}

AppRegistry.registerComponent('Note', () => Note);
// 如果需要测试改变组件的props，componentWillReceiveProps是否执行，可使用下面这个一行代码测试
// AppRegistry.registerComponent('Note', () => NoteWrapper);

参考

https://facebook.github.io/react/docs/react-component.html