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函数。

生命周期相关的函数

函数 说明 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组件被卸载之前这个函数将执行

代码

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

/** * 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