React?組件的常用生命周期函數(shù)匯總

更新時(shí)間：2022年08月15日 14:30:48 作者：巨蟹座不吃魚(yú)???????

這篇文章主要介紹了React?組件的常用生命周期函數(shù)匯總，組件的生命周期有助于理解組件的運(yùn)行方式、完成更復(fù)雜的組件功能、分析組件錯(cuò)誤原因等

1. 概述

意義：組件的生命周期有助于理解組件的運(yùn)行方式、完成更復(fù)雜的組件功能、分析組件錯(cuò)誤原因等。
組件的生命周期：組件從被創(chuàng)建到掛載到頁(yè)面中運(yùn)行，再到組件不用時(shí)卸載的過(guò)程。
生命周期的每個(gè)階段總是伴隨著一些方法調(diào)用，這些方法就是生命周期的鉤子函數(shù)。
鉤子函數(shù)的作用：為開(kāi)發(fā)人員在不同階段操作組件提供了時(shí)機(jī)。
只有類組件才有生命周期。

2. 生命周期的三個(gè)階段

每個(gè)階段的執(zhí)行時(shí)機(jī)
每個(gè)階段鉤子函數(shù)的執(zhí)行順序
每個(gè)階段鉤子函數(shù)的作用

2.1. 創(chuàng)建時(shí)（掛載階段）

執(zhí)行時(shí)機(jī)：組件創(chuàng)建時(shí)（頁(yè)面加載時(shí)）
執(zhí)行順序：constructor() -> render() -> componentDidMount()
鉤子函數(shù)的作用：

鉤子函數(shù)	觸發(fā)時(shí)機(jī)	作用
constructor	創(chuàng)建組件時(shí)，最先執(zhí)行	1.初始化state 2.為事件處理程序綁定 this
render	每次組件渲染都會(huì)觸發(fā)	渲染 UI （注意：不能調(diào)用setState()）
componentDidMount	組件掛載（完成 DOM 渲染）后	1.發(fā)送網(wǎng)絡(luò)請(qǐng)求 2.DOM 操作

// 導(dǎo)入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指向問(wèn)題
    this.handleClick = this.handleClick.bind(this)

    console.warn('生命周期鉤子函數(shù)：constructor')
  }
  componentDidMount() {
    // 1.發(fā)送ajax請(qǐng)求，獲取遠(yuǎn)程數(shù)據(jù)
    // axios.get('http://api....')

    // 2.進(jìn)行DOM操作
    const title = document.getElementById('title')
    console.log(title)

    console.warn('生命周期鉤子函數(shù)：componentDidMount')
  }

  // 事件處理程序
  handleClick() {
    this.setState({
      count: 1
    })
  }

  render() {
    console.warn('生命周期鉤子函數(shù)：render')

    // 錯(cuò)誤演示（不能調(diào)用setState()）
    // this.setState({
    //   count: 2
    // })

    return (
      <div>
        <h1 id='title'>統(tǒng)計(jì)豆豆被打的次數(shù)：{this.state.count}</h1>
        <button id='btn' onClick={this.handleClick}>打豆豆</button>
      </div>
    )
  }
}
ReactDOM.render(<App />, document.getElementById('root'))

2.2. 更新時(shí)（更新階段）

執(zhí)行時(shí)機(jī)：setState()、forceUpdate()、組件接收到新的props。
說(shuō)明：以上任意一種變化，組件就會(huì)重新渲染。
執(zhí)行順序：render() -> componentDidUpdate()

鉤子函數(shù)	觸發(fā)時(shí)機(jī)	作用
render	每次組件渲染都會(huì)觸發(fā)	渲染 UI （與掛載階段是同一個(gè)render）
componentDidUpdate	組件更新（完成 DOM 渲染）后	1.發(fā)送網(wǎng)絡(luò)請(qǐng)求 2.DOM 操作注意：如果要 setState() 必須放在一個(gè)if條件中

// 導(dǎo)入ract
import React from 'react'
import ReactDOM from 'react-dom'

// 父組件
class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      count: 0
    }
  }

  // 事件處理程序
  handleClick = () => {
    // 執(zhí)行時(shí)機(jī)：setState()
    this.setState({
      count: this.state.count + 1
    })

    // 執(zhí)行時(shí)機(jī)：強(qiáng)制更新
    // this.forceUpdate()
  }

  render() {
    return (
      <div>
        {/* 執(zhí)行時(shí)機(jī)：組件接收到新的props */}
        <ShowCount count={this.state.count} />
        <button onClick={this.handleClick}>打豆豆</button>
      </div>
    )
  }
}

// 子組件
class ShowCount extends React.Component {
  render() {
    console.warn('組件ShowCount的生命周期鉤子函數(shù)：render')
    return (<h1 id='title'>統(tǒng)計(jì)豆豆被打的次數(shù)：{this.props.count}</h1>)
  }

  // 注意：如果要調(diào)用 setState() 更新?tīng)顟B(tài)，必須要放在一個(gè) if 條件中
  // 因?yàn)椋喝绻苯诱{(diào)用 setState()，也會(huì)導(dǎo)致遞歸更新?。?！
  componentDidUpdate(prevProps) {
    // componentDidUpdate的作用：獲取DOM
    const title = document.getElementById('title')
    console.log(title)

    // 正確做法：比較更新前后的props是否相同，來(lái)決定是否重新渲染組件
    console.log('上一次的props：', prevProps, '，當(dāng)前的props：', this.props)
    if (prevProps.count !== this.props.count) {
      this.setState({})

      // componentDidUpdate的作用：發(fā)送ajax請(qǐng)求數(shù)據(jù)
      // axios.get('http://api....')
    }

    // 錯(cuò)誤演示
    // this.setState({})

    console.warn('組件ShowCount的生命周期鉤子函數(shù)：componentDidUpdate')
  }
}
ReactDOM.render(<App />, document.getElementById('root'))

2.3. 卸載時(shí)（卸載階段）

執(zhí)行時(shí)機(jī)：組件從頁(yè)面中消失

鉤子函數(shù)	觸發(fā)時(shí)機(jī)	作用
componentWillUnmount	組件卸載（從頁(yè)面中消失）	執(zhí)行清理工作（比如：清理定時(shí)器等）

// 導(dǎo)入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('定時(shí)器正在執(zhí)行~')
    }, 500)
  }

  render() {
    return (<h1 id='title'>統(tǒng)計(jì)豆豆被打的次數(shù)：{this.props.count}</h1>)
  }

  componentWillUnmount() {
    console.warn('組件ShowCount的生命周期鉤子函數(shù)：componentWillUnmount')

    // 清理定時(shí)器
    clearInterval(this.timerId)
  }

}
ReactDOM.render(<App />, document.getElementById('root'))

到此這篇關(guān)于React 組件的常用生命周期函數(shù)匯總的文章就介紹到這了,更多相關(guān)React 組件生命周期函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: