React 組件的生命週期 Component Lifecycle

React Component的生命週期。

React官方教學文件的「Component 生命週期」介紹的很清楚請直接參考。

所謂的生命週期(lifecycle)是指一個東西從出生到死亡，或是從出現到消失的過程。所以「Component的生命週期」是指Component從建立到消失的過程。

Component定義好後，生命週期分為以下階段：

1. Mounting：建構Component實例並加入DOM渲染到畫面。
2. Updating：更新Component狀態使其重新渲染。
3. Unmounting：從DOM移除Component。

而上面各階段中又細分為幾個生命週期方法(Lifecycle Methods)先後順序如下。

Mounting

1. constructor(props)：建構Component。
2. static getDerivedStateFromProps(props, state)：Component render前呼叫。
3. render()：渲染Component。
4. componentDidMount()：Component加到DOM後呼叫。

Updating

1. static getDerivedStateFromProps(props, state)：Component render前呼叫。
2. shouldComponentUpdate(nextProps, nextState)：Component新狀態接收後、render前呼叫
3. render()：渲染Component。
4. getSnapshotBeforeUpdate(prevProps, prevState)：提交Component render結果前呼叫。
5. componentDidUpdate()：Component更新後呼叫。

Unmounting

1. componentWillUnmount()：Component從DOM中移除時呼叫。

下面建立一個按鈕組件Toggle監聽click事件，並在每個生命週期方法中印出方法名稱的console訊息。

App.js

import React from 'react'
import ReactDOM from 'react-dom';
import './App.css';

function App() {
  return <Toggle/>
}

class Toggle extends React.Component {

  // lifecycle method - mount
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true}
    this.click = 0
    console.log("construct")
  }

  handleClick = () => {
    this.click++
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
    if (this.click === 3) {
      ReactDOM.unmountComponentAtNode(document.getElementById('root'));
    }
  }

  // lifecycle method - mount, update
  static getDerivedStateFromProps(props, state) {
    console.log("getDerivedStateFromProps")
    return state
  }

  // lifecycle method - mount
  componentDidMount() {
    console.log("componentDidMount")
  }

  // lifecycle method - mound, update
  render() {
    console.log("render")
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    )
  }

  // lifecycle method - update
  shouldComponentUpdate(nextProps, nextState) { 
    console.log("shouldComponentUpdate")
    return nextState
  }

  // lifecycle method - update
  getSnapshotBeforeUpdate(props, state) {
    console.log("getSnapshotBeforeUpdate")
    return state
  }

  // lifecycle method - update
  componentDidUpdate() {
    console.log("componentDidUpdate")
  }

  // lifecycle method - unmount
  componentWillUnmount() {
    console.log("componentWillUnmount")
  }

}

export default App;

在網頁中載入並點擊按鈕會看到以下console訊息。

上面為正常情況的生命週期方法，若錯誤發生時則有錯誤邊界的生命週期方法。

Error Boundaries

1. static getDerivedStateFromError(error)：子component發生錯誤時被呼叫。
2. componentDidCatch(error, info)：子component發生錯誤時被呼叫。。

• React Component生命週期表
• React onclick 事件處理範例