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()
组件被销毁的时候被调用,给开发者最后的机会进行一些清理操作,比如对定时器的操作等等…