React 组件生命周期-概述
学习目标： 能够说出组件的生命周期一共几个阶段
组件的生命周期是指组件从被创建到挂在到页面中运行，在到组件不用时卸载组件
注意：只有类组件才有生命周期，函数组件没有生命周期(类组件需要实例化，函数组件不需要)
生命周期钩子函数 - 挂载时
| 钩子函数 | 触发时间 | 作用 |
|---|---|---|
| constructor | 组件创建时最先执行（组件初始化时只执行一次） | 1. 初始化 state 2.创建 Ref 3.使用 bind 解决 this 指向问题 |
| render | 组件每次渲染都会触发 | 渲染 UI（不能在 render 里面调用 setState） |
| componentDidMount | 组件挂载后（DOM 渲染完成）执行，初始化时执行一次 | 1.发送网络请求 2.DOM 操作 |
执行顺序:
constructor -> render -> componentDidMount
实例:
import React from 'react'
class App extends React.Component {
state = {
count: 0,
}
constructor() {
super()
console.log('constructor')
}
componentDidMount() {
console.log('componentDidMount')
}
add = () => {
this.setState({
count: this.state.count + 1,
})
}
render() {
console.log('render')
return (
<div>
this is render
<button onClick={
this.add}>{
this.state.count}</button>
</div>
)
}
}
export default App
生命周期钩子函数 - 更新时
学习目标： 能够说出组件更新阶段的钩子函数以及执行时机
| 钩子函数 | 触发时间 | 作用 |
|---|---|---|
| render | 每次组件渲染都会触发 | 渲染 UI(与挂载阶段是同一个 render) |
| componentDidUpdate | 组价更新后(DOM 渲染完) | DOM 操作，可以获取更新后的 DOM 内容，**不要直接调用 setState |
| ** | ||
| 实例 |
import React from 'react'
class App extends React.Component {
state = {
count: 0,
}
constructor() {
super()
console.log('constructor')
}
componentDidMount() {
console.log('componentDidMount')
}
componentDidUpdate() {
console.log('componentDidUpdate')
}
add = () => {
this.setState({
count: this.state.count + 1,
})
}
render() {
console.log('render')
return (
<div>
this is render
<button onClick={
this.add}>{
this.state.count}</button>
</div>
)
}
}
export default App
生命周期钩子函数 - 卸载时
学习目标： 能够说出组件卸载（组件销毁）阶段的钩子函数以及执行时机
| 钩子函数 | 触发时间 | 作用 |
|---|---|---|
| componentwillUnmount | ||
| 实例 |
import React from 'react'
class Test extends React.Component {
//如果要用到数据需要去影响识图，就写入state
//如果不需要影响识图，就定义为普通实例属性
times = null
componentDidMount() {
this.times = setInterval(() => {
console.log('定时器已开启')
}, 1000)
}
componentWillUnmount() {
console.log('componentWillUnmount')
// 清楚定时器
clearInterval(this.times)
}
render() {
return <div>this is Test</div>
}
}
class App extends React.Component {
state = {
flag: true,
}
constructor() {
super()
console.log('constructor')
}
componentDidMount() {
console.log('componentDidMount')
}
componentDidUpdate() {
console.log('componentDidUpdate')
}
add = () => {
this.setState({
flag: !this.state.flag,
})
}
render() {
console.log('render')
return (
<div>
{
this.state.flag ? <Test /> : null}
<button onClick={
this.add}>click</button>
</div>
)
}
}
export default App
