React 元件的常用生命週期函數彙總

// 匯入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'))

// 匯入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'))

// 匯入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'))