生命周期
react生命周期.jpg
Mounting 挂载阶段 -->Updating 运行时阶段->Unmountinf ->卸载阶段--->Error Handleing 错误处理
-
[基础流程]
1、constructor
2、componentWillMount 挂载前,第一次渲染之前
3、render 挂载,正在进行第一次渲染
4、componentDidMount 挂载后，第一次渲染之后 [状态更新触发：修改流程，当组件的状态数据发生改变(stateState)或者传递给组件的属性发生改变(重新调用组件传递不同的属性)，都会引发render重新渲染（差异渲染）]
1、shouldComponentUpdate (是否允许组件重新渲染)
2、componentWillUpdate (重新渲染之前)
3、render 第二次及以后重新渲染
4、componentDidUpdate （重新渲染之后）
-
[属性更新触发，props发生改变]
1、componetWillReceiveProps 在父组件把子组件的属性发生改变后 -
[卸载触发]
1、componentWillUnmount
解析流程code
import React from 'react'
import './App.css'
class App extends React.Component {
// 这是第一个执行的
static defaultProps = {}
constructor(){
super()
console.log('第一次渲染=constructor...')
this.state = { n: 1}
}
// async componentWillMount() {
// let result = await queryData()
// this.setState({
// n: result
// })
// }
// 可以拿到数据
componentWillMount() {
console.log('WILL-MOUNT')
console.log(this.state.n)
console.log(this.refs.dow)
}
render(){
console.log('Render')
return <div ref='dow'>{this.state.n}</div>
}
/* 可以操作dom
真实项目中在这个阶段控制状态信息的更改获取数据,如果在willMount直接修改数据，会把状态信息改变后，然后
render和di的，但是如果set-State是放在一个异步操作中完成，也是先执行redner和didMounted
真实项目中的数据绑定，一般是第一次组件渲染，我们都是绑定的默认属性，第二次才是服务器获取的数据 */
componentDidMount(){
console.log('Did-Mount')
console.log(this.refs.dow)
setInterval(() => {
this.setState({n: this.state.n + 1})
}, 2000);
}
// state状态发生改变后调用，一般为了性能优化
shouldComponentUpdate(nextProps,nextState){
// nextProps,nextState分别代表最新修改的属性和状态
// 在shouldUpdate的钩子函数中获取到的值不是修改过的，而是上一次的
console.log('shouldComponentUpdate,函数返回true就是允许')
if(nextState.n>4){
return false
}else{
return true
}
}
componentWillUpdate(nextProps,nextState){
// 这里面的获取的状态也是更新之前的
console.log('组件更新之前...')
}
componentDidUpdate(){
// 这里获取的状态是更新之后的
console.log('组件更新之后')
}
}
export default App
