REACT生命周期：componentwillmount(), componentWillReceiveProps()替換方案

2021更新：該死的react17.x現在不用生命周期了用hook function了喂！整個程式設計思維都要改變！從頭學過吧朋友們！

首先從最新的（16.4）React 生命周期官方文檔可以看到現在我們就用這三個生命周期：

• componentDidMount()
• componentDidUpdate()
• componentWillUnmount()

這三個生命周期幾乎可以完成所有的需求，對于我這個剛接觸REACT的菜雞來說真是簡單明了易上手啊！由于之前其他的生命周期都被舍棄了，如果繼續用的話console裡應該都會報unsafe warning（雖然不影響程式運作）下面是我的我的替換方案:

1. componentwillmount() → componentDidMount()

   這個簡單我就不貼示例代碼了，直接替換生命周期的名字就行了，完全不需要改其他地方。（如果你改了之後出了bug，别急，後面的生命周期也要一起改）

2. componentWillReceiveProps() → componentDidUpdate()

   修改前：

   componentWillReceiveProps(nextProps) {
           this.setState({
               data: nextProps.yourModels.data
           })
       }
              

   修改後:

   componentDidUpdate(prevProps) {
           if (prevProps.yourModels !== this.props.yourModels) {
               this.setState({
                   data: this.props.yourModels.data
               })
           }
       }
              

   可以看到實作這樣的轉換，除了要修改生命周期的名字，最重要的是把參數裡的nextProps改成prevProps，然後在你的方法内部，原本所有nextProps都要替換成this.props。

   if (prevProps.yourModels !== this.props.yourModels)這一行不能省略，如果删掉，會報錯 Uncaught Error: Maximum update depth exceeded.