react生命周琦
1 实例(挂载、装载)
1.1 getDefaultProps
该组件类仅调用一次,返回可用于设置的props值
1.2 getInitialState
每个实例仅调用一次,初始化实例的state
1.3 componentWillMount
首次渲染之前调用
1.4 render
创建虚拟DOM
1.5 componentDidmount
渲染出真是DOM之后调用
2 渲染后
2.1 componentWillReceiveProps
父组件更改props的时候触发,可以在这里修改state
componentWillReceiveProps: function(nextProps){
if(nextProps.checked !== undefined){
this.setState({
checked: nextProps.checked
})
}
}
2.2 shouldComponentUpdate
state和props改变时触发的验证,返回true
则重新渲染,返回 false
则不会执行render
以及后面的componentWillUpdate
,componentDidUpdate
方法
shouldComponentUpdate: function(nextProps, nextState){
return this.state.checked === nextState.checked;
//return false 则不更新组件
}
2.3 componentWillUpdate
组件收到新的props和state时重新渲染前调用,componentWillUpdate(object nextProps, object nextState)
2.4 componentDidUpdate
重新渲染完成后调用,componentDidUpdate(object prevProps, object prevState)
3 销毁(卸载)
3.1 componentWillUnmount
每当React使用完一个组件,这个组件必须从DOM中卸载后被销毁,此时componentWillUnmout
会被执行,完成所有的清理和销毁工作,在componentDidMount
中添加的任务都需要再该方法中撤销,如创建的定时器或事件监听器。
1.clear你在组建中所有的setTimeout,setInterval
2.移除所有组建中的监听
removeEventListener再次装载时,会调用1.2~1.5。