目錄
- 1. 概述
- 2. 生命周期的三個階段
- 2.1. 創建時（掛載階段）
- 2.2. 更新時（更新階段）
- 2.3. 卸載時（卸載階段）
1. 概述
-
意義：組件的生命周期有助于理解組件的運行方式、完成更復雜的組件功能、分析組件錯誤原因等。
-
組件的生命周期：組件從被創建到掛載到頁面中運行，再到組件不用時卸載的過程。
- 生命周期的每個階段總是伴隨著一些方法調用，這些方法就是生命周期的鉤子函數。
-
鉤子函數的作用：為開發人員在不同階段操作組件提供了時機。
- 只有類組件才有生命周期。
2. 生命周期的三個階段
- 每個階段的執行時機
- 每個階段鉤子函數的執行順序
- 每個階段鉤子函數的作用
2.1. 創建時（掛載階段）
-
執行時機：組件創建時（頁面加載時）
-
執行順序：constructor() -> render() -> componentDidMount()
- 鉤子函數的作用：
| 鉤子函數 |
觸發時機 |
作用 |
| constructor |
創建組件時，最先執行 |
1.初始化state 2.為事件處理程序綁定 this |
| render |
每次組件渲染都會觸發 |
渲染 UI （注意：不能調用setState()） |
| componentDidMount |
組件掛載（完成 DOM 渲染）后 |
1.發送網絡請求 2.DOM 操作 |
// 導入ract
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
constructor(props) {
super(props)
// 1.初始化state
this.state = {
count: 0
}
// 2.解決事件處理程序this指向問題
this.handleClick = this.handleClick.bind(this)
console.warn('生命周期鉤子函數：constructor')
}
componentDidMount() {
// 1.發送ajax請求，獲取遠程數據
// axios.get('http://api....')
// 2.進行DOM操作
const title = document.getElementById('title')
console.log(title)
console.warn('生命周期鉤子函數：componentDidMount')
}
// 事件處理程序
handleClick() {
this.setState({
count: 1
})
}
render() {
console.warn('生命周期鉤子函數：render')
// 錯誤演示（不能調用setState()）
// this.setState({
// count: 2
// })
return (
<div>
<h1 id='title'>統計豆豆被打的次數：{this.state.count}</h1>
<button id='btn' onClick={this.handleClick}>打豆豆</button>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))
2.2. 更新時（更新階段）
-
執行時機：setState()、forceUpdate()、組件接收到新的props。
-
說明：以上任意一種變化，組件就會重新渲染。
-
執行順序：render() ->?componentDidUpdate()
| 鉤子函數 |
觸發時機 |
作用 |
| render |
每次組件渲染都會觸發 |
渲染 UI （與掛載階段是同一個render） |
| componentDidUpdate |
組件更新（完成 DOM 渲染）后 |
1.發送網絡請求 2.DOM 操作 注意：如果要 setState() 必須放在一個if條件中 |
// 導入ract
import React from 'react'
import ReactDOM from 'react-dom'
// 父組件
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
count: 0
}
}
// 事件處理程序
handleClick = () => {
// 執行時機：setState()
this.setState({
count: this.state.count + 1
})
// 執行時機：強制更新
// this.forceUpdate()
}
render() {
return (
<div>
{/* 執行時機：組件接收到新的props */}
<ShowCount count={this.state.count} />
<button onClick={this.handleClick}>打豆豆</button>
</div>
)
}
}
// 子組件
class ShowCount extends React.Component {
render() {
console.warn('組件ShowCount的生命周期鉤子函數：render')
return (<h1 id='title'>統計豆豆被打的次數：{this.props.count}</h1>)
}
// 注意：如果要調用 setState() 更新狀態，必須要放在一個 if 條件中
// 因為：如果直接調用 setState()，也會導致遞歸更新！??！
componentDidUpdate(prevProps) {
// componentDidUpdate的作用：獲取DOM
const title = document.getElementById('title')
console.log(title)
// 正確做法：比較更新前后的props是否相同，來決定是否重新渲染組件
console.log('上一次的props：', prevProps, '，當前的props：', this.props)
if (prevProps.count !== this.props.count) {
this.setState({})
// componentDidUpdate的作用：發送ajax請求數據
// axios.get('http://api....')
}
// 錯誤演示
// this.setState({})
console.warn('組件ShowCount的生命周期鉤子函數：componentDidUpdate')
}
}
ReactDOM.render(<App />, document.getElementById('root'))
2.3. 卸載時（卸載階段）
執行時機：組件從頁面中消失
| 鉤子函數 |
觸發時機 |
作用 |
| componentWillUnmount |
組件卸載（從頁面中消失） |
執行清理工作（比如：清理定時器等） |
// 導入ract
import React from 'react'
import ReactDOM from 'react-dom'
// 父組件
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
count: 0
}
}
// 事件處理程序
handleClick = () => {
this.setState({
count: this.state.count + 1
})
}
render() {
return (
<div>
{
this.state.count > 5 ? <p>豆豆被打死了</p> : <ShowCount count={this.state.count} />
}
<button onClick={this.handleClick}>打豆豆</button>
</div>
)
}
}
// 子組件
class ShowCount extends React.Component {
componentDidMount() {
this.timerId = setInterval(() => {
console.log('定時器正在執行~')
}, 500)
}
render() {
return (<h1 id='title'>統計豆豆被打的次數：{this.props.count}</h1>)
}
componentWillUnmount() {
console.warn('組件ShowCount的生命周期鉤子函數：componentWillUnmount')
// 清理定時器
clearInterval(this.timerId)
}
}
ReactDOM.render(<App />, document.getElementById('root'))
提供CDN加速