react生命周期方法介绍

react生命周期

react生命周期主要包括三个阶段：初始化阶段、运行中阶段、销毁阶段

react在不同的生命周期会触发不同的钩子函数

初始化阶段

getDefaultProps() 设置组件默认的属性， 注意这个钩子函数只会在组件第一次实例化的时候被调用，多次实例化的组件会共享同一份props

getInitialState() 组件的初始化状态，可以通过用户的操作来更改组件自身的状态

componentWillMount() 在组件即将被渲染到页面(组件还没有真正渲染)

render() 组件渲染

componentDidMount() 组件被渲染到页面上，在该方法中可通过this.getDOMNode()访问到真实的DOM元素。此时已可以使用其他类库来操作这个DOM

运行中阶段

componentWillReceiveProps() 组件接收到属性的时候调用，当组件的属性发生变化的时候，并将其作为参数nextProps使用，此时可以更改组件props及state

componentWillReceiveProps: function(nextProps) {    if (nextProps.bool) {        this.setState({            bool: true        });    }}

shouldComponentUpdate() 当组件接收到新的属性或者新的状态发生变化的时候执行(在某些情况下当属性或者状态不发生变化的时候可以手动return false)

组件是否应当渲染新的props或state，返回false表示跳过后续的生命周期方法，通常不需要使用以避免出现bug。在出现应用的瓶颈时，可通过该方法进行适当的优化

在首次渲染期间或者调用了forceUpdate方法后，该方法不会被调用

componentWillUpdate() 组件即将要被更新的时候调用（接收到新的props或者state后，进行渲染之前调用，此时不允许更新props或state）

render() 组件渲染

componentDidUpdate() 组件被更新完成之后调用，此时可以访问到新的DOM元素

销毁阶段

componentWillUnmount() 组件被销毁的时候被调用，给开发者最后的机会进行一些清理操作，比如对定时器的操作等等…