react 中 生命周期
生命周期函数 指在某一时刻组件会自动调用执行的函数
例如
当时 state 和props 发送改变是会自动执行 render 函数
1.Initializtion
初始化 props 和 state
2.Mounting 组件挂载
//在组件即将被挂载到页面的时刻执行
componentWillMount(){
console.log('会在render函数之前执行,且只在第一次执行')
}
//在组件被挂载到页面的时刻执行
componentDidMount(){
console.log('会在render函数之后执行,且只在第一次执行')
}
3.Updation 组件更新
当props 或 states 发送改变时都会执行的生命周期
shouldComponentUpdate(nextProps,nextState){
// 案例 如果组件的值发送变化 返回true
if(nextProps.content!==this.props.content){
return ture
}else{
return false
}
console.log('这儿有两个参数意思 下一步 props 或 nextState 会变化成生命样子')
console.log('组件被更新之前 他会自动执行,要求返回一个布尔类型,决定组件是是否被更新,如果是false则无法更新组件')
return true
}
// 组件被更新之前 会自动执行
componentWillUpdate(){
console.log('如果 shouldComponentUpdate 返回 true 会执行,在render之前 false则不执行')
return true
}
//在组件更新完成之后执行
componentDidUpdate(){
console.log('如果 shouldComponentUpdate 返回 true 会执行,在render之后 false则不执行')
}
props 会比 states 多一个生命周期
// 当一个组件从父组件 接收参数
// 只要父组件的render函数被重新执行了 子组件的这个生命周期函数 就会被执行
componentWillReceiveProps(){
console.log('换一种解释:如果这个组件第一次存在于父组件中 不会执行,如果这个组件之前已经存在于父组件中,才会执行')
}
4.Unmounting 把这个组件 在页面上去除的过程
componentWillUnmount(){
console.log('当这个组件即将被从页面中剔除的时候执行')
}
以上是 react 中 生命周期 的全部内容, 来源链接: utcz.com/z/383779.html