生命週期


Posted by wayne201299 on 2023-10-13

React的生命週期共分成三大塊,創建、更新、銷毀

class component自帶生命週期,functional component則需要hook來處理生命週期及狀態

掛載階段

執行順序是這樣 contructor => render => componentDidMount

  • contructor 為最先被呼叫的方法,可以在此做一些初始值的處理
  • componentDidMount在element被添加到DOM上時觸發,這時候操作DOM才會有內容,在這裡可以使用Ajax請求或事件監聽
  • setState()為異步程序,盡量避免在此之後做state值的運算,可以在第二個參數包成函式傳入

       this.setState(
            {
              time: new Date().toLocaleTimeString(),
            },
            () => {
              document.title = this.state.time
            }
          )
    
    • setState()需要在DOM渲染完畢後才取值

更新階段

觸發更新的方法有三種

  • props改變
  • setState()
  • forceUpdate()

接下來會在觸發render進入componentDidUpdate

不要在這個階段做setState(),會造成無限迴圈!!!

卸載階段

觸發componentWillUnmount,可以在這個階段做subscription的解除避免效能浪費

引用

react-lifecycle-methods-diagram


#React







Related Posts

利用後端框架 express 實作抽獎網站的 API

利用後端框架 express 實作抽獎網站的 API

來學 React 吧之三_React 中的性能優化

來學 React 吧之三_React 中的性能優化

C++ : static, extern前綴意義 (2)

C++ : static, extern前綴意義 (2)


Comments