裝載：

1.  constructor  只會執行一次
  	構造這個函式進行一些初始化

2. static getDerivedStateFromProps()
   在裝載階段和更新階段都會執行

3. rebder(){} 在裝載階段和更新階段也會執行

4. componentDidMount() 只會執行一次

   **執行順序:**
     先執行  constructor ，因為我們要在這個建構函式中初始化一些狀態（資料）->  getDerivedStateFromProps  ->  render  產出解構更新瀏覽器   ->  componentDidMount裝載完成
 

class Counter extends Component {
    constructor(props) {
        super(props)
        console.log('constructor')
    }
    static getDerivedStateFromProps(){
        //在render 之前給你一次改變資料的機會，改變就會返回null（初始化資料執行即可）
        console.log('static getDerivedStateFromProps')
         return null
    }
    componentDidMount(){
        console.log('元件裝載完成')
    }
    render(){
        console.log('render')
        return(
            <div>
               <h1>小明 </h1>
                <p>123 </p>
                <button }>Change Number</button>
            </div>
        )
    }
}

export default Counter
 

在控制檯console.log中可以看到順序