标签:mount pre model ber ret lifecycle focus onclick struct
componentWillMount: 当前组件的状态和函数加载完毕,页面还没有开始渲染
componentDidMount: 组件视图渲染完毕
shouldComponentUpdate: 状态发生改变时触发,视图是否更新的狗子函数
有返回值,返回值为true,就会更新视图,执行钩子函数4;返回值为false,就不会更新视图,回到状态2
componentWillUpdate: 视图即将更新
componentDidUpdate: 视图更新完成后执行的钩子函数
componentWillReceiveProps: 父组件传进来的props值发生变化时触发
componentWillUnmount: 视图即将销毁时执行
// 以下是生命周期组件
?
import React from ‘react‘
?
export default class LifeCycleDemo extends React.Component {
?
constructor (props) {
super(props)
this.state = {
data: ‘我是组件状态‘,
count: 0
}
}
?
componentWillMount () {
console.log(‘即将渲染视图‘)
}
?
componentDidMount () {
console.log(‘视图渲染完毕‘)
}
?
shouldComponentUpdate () {
console.log(‘状态发生改变的时候触发,决定视图是否更新‘)
// return true // 不更新
return false // 更新
}
?
componentWillUpdate () {
// 打印count改变之前的值
console.log(‘视图即将更新‘, this.state.count)
}
?
componentDidUpdate () {
// 打印count改变之后的值
console.log(‘视图更新完成‘, this.state.count)
}
?
componentWillReceiveProps () {
console.log(‘props发生变化时触发‘)
}
?
componentWillUnmount () {
console.log(‘视图即将销毁的时候触发‘)
}
// 这里要用箭头函数,否则函数中的this指向为undefined
changeState = ()=> {
console.log(this)
this.setState({
count: this.state.count + 1
})
}
?
render () {
return (
<div>我是组件
<h3>{this.state.data}</h3>
<span>{this.state.count}</span>
<button onClick={this.changeState}>增加</button>
</div>
)
}
}
注意:
一般处理函数是直接放在类里面
钩子函数中的this指向当前组件;但是自定义函数(changeState)中的this指向undefined,要想自定义函数中的this指向当前组件,必须用箭头函数,或者用关键字bind改变函数中this的指向。
标签:mount pre model ber ret lifecycle focus onclick struct
原文地址:https://www.cnblogs.com/lovlyGir/p/14906352.html