React(一)：生命週期

首先看下react官網的生命週期圖解

實例：時鐘封裝

class Clock extends React.Component {
  constructor(props) {
    //添加一個構造函數內部調用props。    //初始state

    super(props);
    this.state = {date: new Date()};
  }
  
  componentWillMount () {
    //鉤子：組件將要掛載
    //一、組件剛經歷constructor,初始完數據
    //二、組件還未進入render，組件還未渲染完成，dom還未渲染
    //三、componentWillMount 通常用的比較少，更多的是用在服務端渲染
  }
  componentDidMount() {
    //當組件輸出到 DOM 後會執行 componentDidMount() 鉤子
    //組件第一次渲染完成，此時dom節點已經生成，能夠在這裏調用ajax請求，返回數據setState後組件會從新渲染
    //一、添加事件addEventListener
    //二、調用ajax請求

    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }
  
  componentWillReceiveProps (nextProps) {
    //componentWillReceiveProps在接受父組件改變後的props須要從新渲染組件時用到的比較多
    //經過對比nextProps和this.props，將nextProps setState爲當前組件的state，從而從新渲染組件
  }
  
  shouldComponentUpdate (nextProps,nextState) {
    return this.state.date !== nextState.date;
    //惟一用於控制組件從新渲染的生命週期，因爲在react中，setState之後，state發生變化，組件會進入從新渲染的流程，
    // （暫時這麼理解，其實setState之後有些狀況並不會從新渲染，好比數組引用不變）在這裏return false能夠阻止組件的更新
  }
  
  componentWillUpdate (nextProps,nextState) {
    //shouldComponentUpdate返回true之後，組件進入從新渲染的流程，進入componentWillUpdate,這裏一樣能夠拿到nextProps和nextState
    
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    //render函數會插入jsx生成的dom結構，react會生成一份虛擬dom樹，在每一次組件更新時，
    // 在此react會經過其diff算法比較更新先後的新舊DOM樹，比較之後，找到最小的有差別的DOM節點，並從新渲染
    
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }

    componentDidUpdate (prevProps,prevState) {
    //組件更新完畢後，react只會在第一次初始化成功會進入componentDidmount,
    //以後每次從新渲染後都會進入這個生命週期，這裏能夠拿到prevProps和prevState，即更新前的props和state。
  }
  componentWillUnmount() {
    ///銷燬鉤子：完成全部的清理和銷燬工做
    //一、clear你在組建中全部的setTimeout,setInterval
    //二、移除全部的監聽 removeEventListener

    clearInterval(this.timerID);
  }

}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);複製代碼

在 CodePen 上嘗試。

定義：

一、每當Clock組件第一次加載到DOM中的時候，生成定時器，這在React中被稱爲掛載

二、一樣，每當Clock生成的這個DOM被移除的時候，清除定時器，這在React中被稱爲卸載。

這些方法被稱做生命週期鉤子

注意

react v16.3，生命週期去掉了如下三個

• componentWillMount
• componentWillReceiveProps
• componentWillUpdate

同時爲了彌補失去上面三個週期的不足又加了兩個

• static getDerivedStateFromProps
• getSnapshotBeforeUpdate

1. 在upate以前獲取dom節點，getSnapshotBeforeUpdate(prevProps, prevState)代替componentWillUpdate(nextProps, nextState)。
   
2. getSnapshotBeforeUpdate在render以後，但在節點掛載前componentDidUpdate(prevProps, prevState, snapshot)直接得到getSnapshotBeforeUpdate返回的dom屬性值。