react組件掛載瞭解

react組件掛載

• 概念
  將組件渲染，並構建DOM元素然後插入頁面的過程

• 組件內部在掛載是進行的過程

  ——constructor #初始化組件
  ——render()  # 掛載
  ——構建DOM元素插入頁面
  

• 再進行掛載過程中還有一些具體的過程

  ——constructor #初始化組件
  ——componentWillMount() #在組件插入頁面之前進行
  ——render() #掛載
  ——構建DOM元素插入頁面
  ——componentDidMount #在組件插入後進行
  ——從頁面刪除DOM
  ——componentWillUnmount()
  

  其中，我們一些組件的啓動動作，如Ajax數據拉取操作、一些定時器的啓動，都可以在componentWillMount()函數中進行。數組從頁面中銷燬時，有時候需要一些數據的清理，例如，定時器清理等，就會放到componentWillUnmount()函數中去處理。

  //啓動定時器
  componentWillMount(){
      this.timer = setInterval(() => {
          this.setState({
              date: new Date()
          });
      }, 1000)
  }
  
  //清除定時器
  componentWillUnmount () {
      clearInterval(this.timer);
  }  
  

• 補充
  有時候，有些組件的啓動工作是依賴 DOM 的，例如動畫的啓動，而 componentWillMount 函數調用是在組件掛載完成之前，所以沒法進行有些啓動工作，這時候就可以把這些操作放在 componentDidMount 當中。