react声明周期
import React, { Component } from 'react'
export class Lifereact extends Component {
constructor(props) {
super(props)
this.state = {
age: 12,
address: 'saafsa',
}
}
// 在模板渲染完成之前 对state数据进行操作 create
componentWillMount() {
console.log('挂在前')
}
// 渲染并返回虚拟dmo 只能通过this.props和this.state访问数据
render() {
console.log('挂载')
return (
<div>
<h1>react生命周期</h1>
</div>
)
}
componentDidMount() {
console.log('挂载后')
}
//更改state 或者props 触发render组件更新
shouldComponentUpdate() {
// 可以手动控制该组件数据变动时候是否更新 return false
}
componentWillUpdate() {
// nextProps nextState 获取更后的的值
}
componentDidUpdate() {
// 通过 prevProps prevState 获取更新前的变量
console.log('更新后')
}
componentWillUnmount() {
console.log('组件销毁')
}
}
export default Lifereact