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