React入门系列（四）组件的生命周期

React的核心是组件，组件在创建和渲染的过程中，需要调用固定的钩子函数，也称为组件的“生命周期”。利用生命周期函数，可以做初始化工作，并在渲染过程中实现一些特定功能。

1. 生命周期函数

组件的整个生命周期会涉及如下函数：

钩子函数	说明
getDefaultProps	设置props默认配置
getInitialState	设置state默认配置
componentWillMount	组件被注入DOM之前被调用
render	渲染组件时被调用
componentDidMount	组件被注入DOM之后被调用
componentWillReceiveProps	挂载的组件接收到新的props时被调用
shouldComponentUpdate	指定是否更新props和state
componentWillUpdate	更新组件时，渲染之前被调用
componentDidUpdate	更新组件时，渲染之后被调用
componentWillUnMount	卸载组件

可以参考下图（来自网络）进一步了解整个流程。

react life cycle.jpg

这里特殊说明两个方法：getDefaultProps和getInitialState。

• 用React.createClass()函数创建组件，调用的是这两个钩子函数。
• ES6类方法创建的组件，初始化props用的是静态属性defaultProps；初始化state是在构造函数constructor里做的。

总结：

• props更改时，会依次调用componentWillReceiveProps -> shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate；
• state更改时，会依次调用shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate；

小贴士

shouldComponentUpdate 是一个非常重要的钩子函数，这个函数默认返回true。

在React中，调用setState方法，React不会立即对其更新，而是将其标记为“脏”状态
（组件状态更新不会立刻生效，React使用事件轮询对变更内容进行批量绘制）。
当事件轮询结束后，React将“脏”组件及其子节点进行重绘，所有后代节点的render方法都会被调用，哪怕它们没法发生变化。

通过shouldComponentUpdate方法，可以阻止子树的重绘
（自行实现该方法并返回false，React会跳过该组件及其子组件的重绘过程）。

--- 参考《Pro React》

下面，我们来看一个真实例子，观察组件生命周期的变换（采用ES6类模式）。

2. 组件实例

class DangerButton extends React.Component {
    /*类型检查*/
    static propTypes = {
        onClick: React.PropTypes.func,
        text: React.PropTypes.string
    };

    /*初始化props值*/
    static defaultProps = {
        type: 'btn'
    };

    constructor(props) {
        super(props);
        // 初始化state值
        this.state = {count: 0};
        this.increaseCount = this.increaseCount.bind(this);
    }

    increaseCount() {
        this.setState({count: this.state.count + 1});
    }

    getObjectValues(obj){
        var array = [];
        for(let key in obj){
            array.push(key + ":" + obj[key]);
        }
        return array.join(";");
    }

    /*----------------start: life cycle---------------*/
    /*组件被注入DOM之前*/
    componentWillMount() {
        var button = document.getElementById('dangerBtn');
        console.log("componentWillMount:" + button);
    }
    /*组件被注入DOM之后*/
    componentDidMount() {
        var button = document.getElementById('dangerBtn');
        console.log("componentDidMount:" + button);
    }

    /*挂载的组件接收到新的props时被调用*/
    componentWillReceiveProps(nextProps){
        console.log("componentWillReceiveProps:" + nextProps);
    }

    /*指定是否更新props和state*/
    shouldComponentUpdate(nextProps, nextState){
        console.log("shouldComponentUpdate-true!");
        return true;
    }

    /*更新组件时，渲染之前*/
    componentWillUpdate(nextProps, nextState){
        console.log("componentWillUpdate-nextProps:" + this.getObjectValues(nextProps));
        console.log("componentWillUpdate-nextState:" + this.getObjectValues(nextState));
    }

    /*更新组件时，渲染之后*/
    componentDidUpdate(prevProps, prevState){
        console.log("componentDidUpdate-prevProps:" + this.getObjectValues(prevProps));
        console.log("componentDidUpdate-prevState:" + this.getObjectValues(prevState));
    }

    /*卸载组件*/
    componentWillUnMount() {
        var button = document.getElementById('dangerBtn');
        console.log("componentDidMount:" + button);
    }

    render() {
        console.log("rendering....");
        return (

            
                {this.props.text}
            
            
Click count: {this.state.count}
        
);
    }
    /*----------------end: life cycle---------------*/
}
ReactDOM.render(
    ,
    document.getElementById('container')
);

第一次渲染DangerButton组件时，控制台打印如下信息：

componentWillMount:null
rendering....
componentDidMount:[object HTMLButtonElement]

可见，渲染组件的componentWillMount阶段，真实DOM还没有生成；到了componentDidMount阶段，组件才真正被加载到DOM中。

然后，点击DangerButton，count值加一，控制台打印如下信息：

shouldComponentUpdate-true!
componentWillUpdate-nextProps:text:click it!;type:btn
componentWillUpdate-nextState:count:1
rendering....
componentDidUpdate-prevProps:text:click it!;type:btn
componentDidUpdate-prevState:count:0

可见，如果组件自身的state更新后（点击button，触发onClick事件），会依次执行shouldComponentUpdate,componentWillUpdate，render和componentDidUpdate函数。

小结

在组件整个生命周期中，涉及到两种变量来传递/存储值，prop和state。那么，它们的使用场景是什么？有什么区别呢？下一节，我们将继续探索......

下一节：React入门系列（五）props和state