React 组件的生命周期总结

React组件的生命周期总结表

一个React组件在它的一个生命周期内一共经历如下阶段 :

所属阶段	周期内该阶段 被执行顺序	周期内该阶段 被执行次数	介绍
初始化阶段	1	1	当一个组件要被挂载到DOM上时，会首先经历初始化阶段
挂载阶段	2	1	紧跟在初始化阶段之后
更新阶段	n	N	组件挂载后可能会被反复更新， 更新原因主要有两种：属性props变化，状态state变化 这里字母N表示多次,n泛指第若干次 这也是组件的运行时阶段
卸载阶段	N+3	N+3	当一个组件不再使用从DOM中移除时经历一次该阶段

React组件在生命周期各个阶段的生命周期方法总结图

下面各图内的列表中，首行蓝底白字表示该阶段主要发生的事情或者导致该阶段发生的主要原因，这是该阶段同其他阶段本质性的区别。其他行分别表示相应的回调函数。

在下面的总结中，因为初始化阶段和挂载阶段总是先后发生，所以将他们总结放在一个图中。

另外，React组件的定义也由原来的使用React.createClass()，转变成了使用ES6风格继承自基类React.Component的方式，图中提到的 GetDefaultProps(函数,设置该类组件实例的初始属性)和GetInitialState(函数,设置该类组件实例的初始状态)指的是React.createClass()情况的用法，而在使用React.Component的情况下,该做法已经改变成在相应的组件类上定义静态成员，但相应的语义和执行顺序没有发生改变。关于这一点，请参考 :

• Refactoring React Components to ES6 Classes
• React Without ES6

下面每个阶段的生命周期回调方法在该阶段内的执行顺序跟它们在图中出现的顺序相同。

初始化阶段+挂载阶段

方法名称	是否可调用setState	描述
getDefaultProps	否	设置缺省属性
getInitialState	否	设置初始状态
componentWillMount	是	组件即将被加载，常用于一些业务初始化
render	否	渲染组件
componentDidMount	是	组件已经被加载，常做一些网络数据请求

注意 :
1.getDefaultProps() 是针对使用 React.createClass的情况 ，MyComponent.defaultProps 是针对ES6 class定义的情况
2.getInitialState() 是针对使用 React.createClass的情况，this.state = … 是针对ES6 class定义的情况，在constructor中执行

属性变化触发的更新阶段

方法名称	是否可调用setState	描述
componentWillReceiveProps	是	组件实例接收到新的属性
shouldComponentUpdate	否	结合新旧的属性/状态判断是否要更新组件
componentWillUpdate	否
render	否	渲染组件
componentDidUpdate	否	组件已经被更新，此时可以做一些直接DOM操作(如果需要的话)

状态变化触发的更新阶段

方法名称	是否可调用setState	描述
shouldComponentUpdate	否
componentWillUpdate	否
render	否
componentDidUpdate	否

卸载阶段

方法名称	是否可调用setState	描述
componentWillUnmount	否

React组件生命周期大图总结

React组件生命周期方法中调用setState是否安全大图总结

图片来源 : The Life Cycle Recap
参考资料 :
Understanding the React Component Lifecycle
React Native 中 component 生命周期

代码例子

import React, {Component} from 'react';
import {AppRegistry, StyleSheet, Text, View} from 'react-native';

export default class App extends Component {

    /**
     * 构造函数
     * @param props
     */
    constructor(props) {
        super(props);//该语句必须是本方法体内第一句
        console.log("constructor");

        //初始化状态值
        this.state = {
            message: "Hello World !"
        }
    }

    /**
     * 准备加载组件
     */
    componentWillMount() {
        console.log("componentWillMount");
    }

    /**
     * 渲染界面
     * @returns {*}
     */
    render() {
        console.log("render");
        return (
            <View style={styles.container}>
                <Text style={styles.message}>
                    {this.state.message}
                </Text>
            </View>
        );
    }

    /**
     * 组件加载成功并渲染出来
     */
    componentDidMount() {
        console.log("componentDidMount");
    }

    /**
     * 组件接收到新的 props 时触发
     *
     * @param nextProps 新属性
     */
    componentWillReceiveProps(nextProps) {
        console.log("componentWillReceiveProps");
    }

    /**
     * 决定是否需要更新组件
     * @param nextProps 新属性
     * @param nextState 新状态
     */
    shouldComponentUpdate(nextProps, nextState) {
        console.log("shouldComponentUpdate");
    }

    /**
     * 组件重新渲染前会调用
     * @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: {
        flex: 1,
        alignItems: 'center',
    },
    message: {
        fontSize: 20,
    },
});

AppRegistry.registerComponent('app', () => App);