react的生命週期

生命週期圖譜速查表

舊版本

• 初始化階段 ———掛載時的階段

  constructor(props)

  如果不初始化state或不進行方法繫結，則不需要React元件實現建構函式

  constructor (props) { //初始化state 或 進行方法繫結
    super (props)
    // 只能在建構函式中直接為 this.state 賦值。如需在其他方法中賦值，你應使用 this.setState() 替代。
    // 避免在建構函式中引入任何副作用或訂閱 --- 非同步操作 ，如果要使用，建議在componentDidMount中使用
   
    // 如果不初始化 state 或不進行方法繫結，則不需要為 React 元件實現建構函式
    this.state = {
      msg: 'hello生命週期函式'
     }
    console.log('construtor')
  }

  componentWillMount()

  16.3版本開始引入別名，提示在17版本時將廢除此生命週期的鉤子函式在掛在之前被呼叫。它在render()之前呼叫，因此方法中同步呼叫setStare()不會發生額外渲染。

  使用時會報以上警告

  render()

  render() 方法是 class 元件中唯一必須實現的方法。 render() 函式應該為純函式，這意味著在不修改元件 state 的情況下，每次呼叫時都返回相同的結果，並且它不會直接與瀏覽器互動。 如需與瀏覽器進行互動，請在 componentDidMount() 或其他生命週期方法中執行你的操作(非同步操作) 掛載時和更新時使用的都是同一個鉤子函式

   render () {
    // class 元件中唯一必須實現的方法。
    // render() 函式應該為純函式，這意味著在不修改元件 state 的情況下，每次呼叫時都返回相同的結果，並且它不會直接與瀏覽器互動。
    // 掛載時和更新時都會觸發此函式
    console.log('render')
    return (
     <div>
      <h1>生命週期鉤子函式</h1>
      <button onClick={ () => {
       this.setState({
        msg: '6666'
        })
       }}>點選</button>
   
       { this.state.msg }
     </div>
     )
    }

  componentDidMount()

  元件掛載後（插入 DOM 樹中）立即呼叫。 訂閱資料+資料請求 + 例項化資料

   componentDidMount () {
    // 元件掛載後（插入 DOM 樹中）立即呼叫。
    // 訂閱資料 --- dataSource.subscribe()
    // 資料請求 --- axios()
    // 例項化  --- var swiper = new Swiper()
    // DOM操作 --- document.getElementById('').style.display = ''
    // 修改狀態 --- this.setState()
    console.log('componentDidMount')
    }

• 執行時階段———更新時階段

  當元件的 props 或 state 發生變化時會觸發更新

  componentWillReceiveProps(nextProps) {} 如果使用過 新版的 的生命週期鉤子函式之後，不能使用即將廢棄的此函式

  componentWillReceiveProps (nextProps, nextContext) {
    //  // 執行時階段 - 更新階段 --- props 和 state 改變是觸發 - 接收父元件傳遞過來的資料時觸發，需要通過nextProps與this.props對比
    //  console.log(nextProps)
    // }

新版本

初始化階段 ———掛載時的階段

constructor(props): 如果不初始化 state 或不進行方法繫結，則不需要為 React 元件實現建構函式

**static getDerivedStateFromProps()**：

**render()**:render() 方法是 class 元件中唯一必須實現的方法。 render() 函式應該為純函式，這意味著在不修改元件 state 的情況下，每次呼叫時都返回相同的結果，並且它不會直接與瀏覽器互動。 如需與瀏覽器進行互動，請在 componentDidMount() 或其他生命週期方法中執行你的操作(非同步操作) 掛載時和更新時使用的都是同一個鉤子函式

**componentDidMount()**:元件掛載後（插入 DOM 樹中）立即呼叫。 訂閱資料+資料請求 + 例項化資料

shouldCOmponentUpdate() : 提升react元件效能的關鍵，要不不寫。要寫必寫返回值，如果返回為true，就回執行更新時函式，如果返回為false，不會更新 ，預設為true

執行時階段———更新時階段

當元件的 props 或 state 發生變化時會觸發更新

static getDerivedStateFromProps()