<!-- 1 组件的生命周期概述 -->
意义:组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因等
组件的生命周期:组件从被创建到挂载到页面中运行,再到组件不用时卸载的过程
生命周期的每个阶段总是伴随着一些方法调用,这些方法就是生命周期的钩子函数。
钩子函数的作用:为开发人员在不同阶段操作组件提供了时机。
只有 类组件 才有生命周期。
<!-- 2. 创建时(挂载阶段) -->
constructor() render() componentDidMoun
constructor 创建组件时,最先执行
1. 初始化state
2. 为事件处理程序绑定this
render 每次组件渲染都会触发 渲染UI(注意:不能调用setState())
componentDidMount 组件挂载(完成DOM渲染)后
1. 发送网络请求
2. DOM操作
class App extends React.Component {
constructor(props) {
super(props)
// 初始化state
this.state = {
count: 0
}
// 处理this指向问题
console.warn('生命周期钩子函数: constructor')
}
// 1 进行DOM操作
// 2 发送ajax请求,获取远程数据
componentDidMount() {
// axios.get('http://api.....')
// const title = document.getElementById('title')
// console.log(title)
console.warn('生命周期钩子函数: componentDidMount')
}
render() {
// 错误演示!!! 不要在render中调用setState()
// this.setState({
// count: 1
// })
console.warn('生命周期钩子函数: render')
return (
<div>
<h1 id="title">统计怪兽被打的次数:</h1>
<button id="btn">打怪兽</button>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))
<!-- 3. 更新时(更新阶段) -->
执行时机:1. setState() 2. forceUpdate() 3. 组件接收到新的props
说明:以上三者任意一种变化,组件就会重新渲染
执行顺序:render() componentDidUpdate()
render 每次组件渲染都会触发 渲染UI(与 挂在阶段 是同一个render)
componentDidUpdate 组件更新(完成DOM渲染)后
1 发送网络请求
2 DOM操作
注意:如果要setState() 必须放在一个if条件中
class App extends React.Component {
constructor(props) {
super(props)
// 初始化state
this.state = {
count: 0
}
}
// 打怪兽
handleClick = () => {
// this.setState({
// count: this.state.count + 1
// })
// 演示强制更新:
this.forceUpdate()
}
render() {
console.warn('生命周期钩子函数: render')
return (
<div>
<Counter count={this.state.count} />
<button onClick={this.handleClick}>打怪兽</button>
</div>
)
}
}
class Counter extends React.Component {
render() {
console.warn('--子组件--生命周期钩子函数: render')
return <h1>统计怪兽被打的次数:{this.props.count}</h1>
}
// 注意:如果要调用 setState() 更新状态,必须要放在一个 if 条件中
// 因为:如果直接调用 setState() 更新状态,也会导致递归更新!!!
componentDidUpdate(prevProps) {
console.warn('--子组件--生命周期钩子函数: componentDidUpdate')
// 正确做法:
// 做法:比较更新前后的props是否相同,来决定是否重新渲染组件
console.log('上一次的props:', prevProps, ', 当前的props:', this.props)
if (prevProps.count !== this.props.count) {
// this.setState({})
// 发送ajax请求的代码
}
// 错误演示!!!
// this.setState({})
// 获取DOM
// const title = document.getElementById('title')
// console.log(title.innerHTML)
}
}
ReactDOM.render(<App />, document.getElementById('root'))
// 4. 卸载时(卸载阶段)
componentWillUnmount 组件卸载(从页面中消失) 执行清理工作(比如:清理定时器等
class App extends React.Component {
constructor(props) {
super(props)
// 初始化state
this.state = {
count: 0
}
}
// 打怪兽
handleClick = () => {
this.setState({
count: this.state.count + 1
})
}
render() {
return (
<div>
{this.state.count > 3 ? (
<p>怪兽被打死了~</p>
) : (
<Counter count={this.state.count} />
)}
<button onClick={this.handleClick}>打怪兽</button>
</div>
)
}
}
class Counter extends React.Component {
componentDidMount() {
// 开启定时器
this.timerId = setInterval(() => {
console.log('定时器正在执行~')
}, 500)
}
render() {
return <h1>统计怪兽被打的次数:{this.props.count}</h1>
}
componentWillUnmount() {
console.warn('生命周期钩子函数: componentWillUnmount')
// 清理定时器
clearInterval(this.timerId)
}
}
ReactDOM.render(<App />, document.getElementById('root'))