背景

Component Life Cycle 也是React裡面的新概念. 其實是life cycle是在決定這個component在什麼時候要做什麼事情. 這時候你應該覺得, danny 你是在講三小? 沒關係, 我示範給你看, 然後之後我們在講解.

Live Demo

我要用我的netflix專案來來玩一下, 這個專案我去模仿netflix的一部分. 我的專案有搜尋,即將上映, 還有電影介紹的功能.

我在我的netflix 專案裡面, 在電影介紹頁(MovieShow.js)裡面有用componentWillMount, componentDidUpdate.
第一個componentWillMount代表在組件要被插入真實的 DOM 的時候會執行以下的動作.

我用componentDidUpdate 來判定說如果url有變動的話要重新抓資料. 如果不這樣的話, 網頁不會更新. 這個雷也卡了我好久.

//MovieShow.js
...
  componentWillMount() {
    this.props.fetchMovie(this.props.match.params.id)
    this.props.fetchCast(this.props.match.params.id)
    this.props.fetchTrailer(this.props.match.params.id)
  }

  componentDidUpdate(prevProps, prevState) {
    if(prevProps.match.params.id !== this.props.match.params.id){
      this.props.fetchMovie(this.props.match.params.id)
      this.props.fetchCast(this.props.match.params.id)
      this.props.fetchTrailer(this.props.match.params.id)
    }
  }
...

那實際的流程程序請參考以下圖.

這張表看起來很恐怖但是不用擔心你不會用到大部分的function. 像我用到現在我也才碰過4個而已, 大部份我們只會用到 componentWillMount, componentDidMount, 還有 componentWillUpdate.

參考連結

• reactjs101 React Component Lifecycle
• react-china State and Lifecycle