第一阶段组件创建到首次渲染到页面
1.constructor() 构造函数,在创建组件的时候调用一次
2.componentWillmount() - 快捷键cwm
在组件即将被挂载的时候调用一次。组件还没渲染出来但是js逻辑已经开始执行了,一般异步的方法(ajax)请求数据
3.render渲染
4.componentDidMount()-快捷键cdm在组件被挂载完成的时候调用一次可以在这里使用refs 组件已经被渲染出来了
第二阶段
1.componentWillReceiveProps(nextProps) { }//获取父组件更新的时候带来的数据 -快捷键cwrp
2.shouldComponentUpdate(nextProps, nextState) { } -快捷键 scu
也是可以获取父组件带来的数据 但是他和componentWillReceiveProps的区别就是后者可以进行判断
来判断更新后的数据和以前的数据 例如:
shouldComponentUpdate(nextProps, nextState) {
console.log('02-是否将来更新组件')
if(this.state.tian !== nextProps.title){
this.setState({
tian:nextProps.title
})
}
//true 会重新渲染render
//false 不会重新渲染render
return true
}
3.componentWillUpdate(nextProps, nextState) { 快捷键-cwup
// console.log('组件即将被更新',nextProps, nextState)
//更新的问题 执行render函数 才能更新
}
4.componentDidUpdate(prevProps, prevState) { 快捷键-cdup
// console.log('02-组件更新完成',prevProps, prevState)
// console.log('完成更新')
}
5.componentWillUnmount() { 快捷键-cwun
console.log('03-List组件即将被销毁')
window.localStorage.setItem('key',999)
}