import React, { Component } from 'react'

export default class index extends Component {

  //1[constructor].做一些元件的初始化工作,如果不初始化 state 或不進行方法繫結，則不需要為 React 元件實現建構函式。
  constructor(props) {
    super(props);
    // 不要在這裡呼叫 this.setState()
    this.state={count:1};
    this.handleClick = this.handleClick.bind(this);
    console.log('建構函式:constructor');
  }
  
  handleClick(){
    // console.log(this.props);
    this.setState({count:this.state.count+1})
  }
  //2.[getDerivedStateFromProps].會在呼叫 render 方法之前呼叫，並且在初始掛載及後續更新時都會被呼叫。它應返回一個物件來更新 state，如果返回 null 則不更新任何內容。

  //3.[shouldComponentUpdate].當 props 或 state 發生變化時，shouldComponentUpdate() 會在渲染執行之前被呼叫。返回值預設為 true。首次渲染或使用 forceUpdate() 時不會呼叫該方法。

  //4.[render].根據元件的props和state（無論兩者的重傳遞和重賦值是否有變化，都可以引起元件重新render）(render是純函式)
  render() {
    //return 一個React元素（描述元件，即UI）,不負責元件實際渲染工作,之後由React自身根據此元素去渲染出頁面DOM。
    console.log('render');
    return (
      <div>
        <h1>React生命週期</h1>
        <button onClick={()=>{
          this.handleClick()
        }}>函式1</button>
        <p>{this.state.count}</p>
        <button onClick={()=>{
          console.log('強制渲染：forceUpdate()')
          this.forceUpdate()//強制讓元件重新渲染呼叫render（）
        }}>強制渲染</button>
      </div>
    )
  }

  /*5.[getSnapshotBeforeUpdate()].在最近一次渲染輸出（提交到 DOM 節點）之前呼叫。
  它使得元件能在發生更改之前從 DOM 中捕獲一些資訊（例如，滾動位置）。
  此生命週期方法的任何返回值將作為引數傳遞給 componentDidUpdate()。*/

  /*React 更新 ­D­O­M 和 refs(在此React自身根據此元素去渲染出頁面DOM)*/

  //6[componentDidMount].會在元件第一次掛載後（插入 DOM 樹中）立即呼叫,且只會被呼叫一次。
  componentDidMount(){
    console.log('元件第一次掛載：componentDidMount');
  }

  //7[componentDidUpdate].會在更新後會被立即呼叫。首次渲染不會執行此方法,此方法在元件更新後被呼叫，可以操作元件更新的DOM，prevProps和prevState這兩個引數指的是元件更新前的props和state
  componentDidUpdate(){
    console.log('更新後呼叫:componentDidUpdate');
  }

  //8[componentWillUnmount].會在元件解除安裝及銷燬之前直接呼叫。在此方法中執行必要的清理操作，例如，清除 timer。
  componentWillUnmount(){
    console.log('元件解除安裝及銷燬之前：componentWillUnmount');
  }

}

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/