網頁

2021/7/22

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發生錯誤時被呼叫。。


沒有留言:

張貼留言