1.介紹

（1）作用：useEffect的作用是“勾住”函式元件中某些生命週期函式。 （2）都能勾住哪些宣告周期函式           ① componentDidMount(元件被掛載完成後)           ②componentDidUpdate(元件重新渲染完成後)           ③componentWillUnmount(元件即將被解除安裝前) （3）為什麼是這3個生命週期函式？            因為修改資料我們可以使用前面學到的useState，資料變更會觸發元件重新渲染，上面3個就是和元件渲染關聯最緊密的生命週期函式。 （4）useEffect是來解決類元件什麼問題的？          useEffect是來解決類元件 某些執行程式碼被分散在不同的生命週期函式中 的問題。     2.useEffect基本用法 （1）useEffect(effect,[deps])函式可以傳入2個引數，第1個引數為我們定義的執行函式、第2個引數是依賴關係(可選引數)。若一個函式元件中定義了多個useEffect，那       麼他們實際執行順序是按照在程式碼中定義的先後順序來執行的。       具體說明如下：        第1個值effect是一個function，用來編寫useEffect對應的執行程式碼。       componentDidMount、componentDidUpdate、componentWillUnmount ，當上述3個生命週期函式執行後，就會觸發useEffect函式，進而執行而第1個引數 effect 中的  內容。 （2）程式碼形式   useEffect(() => {         //此處編寫 元件掛載之後和元件重新渲染之後執行的程式碼         ...          //如果不需要在元件解除安裝前執行任何程式碼，那麼可以忽略不寫effect中的return相關程式碼
        return () => {             //此處編寫 元件即將被解除安裝前執行的程式碼             ...         }     },[deps]) ①effect 函式主體內容中的程式碼，就是元件掛載之後和元件重新渲染之後你需要執行的程式碼；   ②effect 函式 return 出去的返回函式主體內容中的程式碼，就是元件即將被解除安裝前你需要執行的程式碼；   ③第2個引數 [deps]，為可選引數，若有值則向React表明該useEffect是依賴哪些變數發生改變而觸發的；           '[deps]'補充說明：   ①若預設，則元件掛載、元件重新渲染、元件即將被解除安裝前，每一次都會觸發該useEffect；   ②若傳值，則必須為陣列，陣列的內容是函式元件中通過useState自定義的變數或者是父元件傳值過來的props中的變數，告訴React只有陣列內的變數發生變化時才會觸發useEffect；   ③若傳值，但是傳的是空陣列 []，則表示該useEffect裡的內容僅會在“掛載完成後和元件即將被解除安裝前”執行一次；       3.  useEffect使用 （1）如果某類元件中有變數a,預設值為0，當元件第一次被掛載或元件重新渲染後，改變a的值          

 import React, { useState,useEffect} from 'react';

    function Component() {
      const [a, setA] = useState(0);//定義變數a，並且預設值為0
      useEffect(() => {
          //無論是第一次掛載還是以後每次元件更新，修改網頁標題的執行程式碼只需要在這裡寫一次即可
          document.title = `${a} - ${Math.floor(Math.random()*100)}`;
      })
      const clickAbtHandler = (eve) =>{
          setA(a+1);
      }
      return <div>
          {a}
          <button onClick={clickAbtHandler}>a+1</button>
        </div>
    }

    export default Component;

　　

如果使用類元件中，需要在 componentDidMount、componentDidUpdate中寫兩次相同的程式碼，但是使用useEffect只需要寫一次   4.useEffect進階高階使用 （1）元件需求：  若某類元件中有變數a，預設值為0，當元件第一次被掛載後或元件重新渲染後，將網頁標題顯示為a的值。                                當元件第一次被掛載後執行一個自動累加器 setInterval，每1秒 a 的值+1。為了防止記憶體洩露，我們在該元件即將被解除安裝前清除掉該累加器。    
        需求分析：            關於自動累加器的操作，只關聯 “元件掛載後和元件解除安裝前” 這2個生命週期函式中，那useEffect還包含了每次元件重新渲染後，這該怎麼辦？             useEffect函式的第2個引數表示該依賴關係，**將useEffect的第2個引數，設定為空陣列 []**，即表示告訴React，這個useEffect不依賴任何變數的更新所引發的   元件重 新渲染，以後此元件再更新也不需要呼叫此useEffect。 這樣就可以實現只在第一次掛載後和解除安裝前呼叫此useEffect的目的。       

 import React, { useState,useEffect} from 'react';

    export default function Component4() {
      const [a, setA] = useState(0);//定義變數a，並且預設值為0

      //定義第1個useEffect，專門用來處理自動累加器
      useEffect(() => {
        // let timer = setInterval(() => {setA(a+1)},1000);// <-- 請注意這行程式碼，暗藏玄機
          let timer = setInterval(() => { setA(a=>a+1)},1000)
        return () => {
            clearInterval(timer);
        }
      }, []);//此處第2個引數為[]，告知React以後該元件任何更新引發的重新渲染都與此useEffect無關

      //定義第2個useEffect，專門用來處理網頁標題更新
      useEffect(() => {
        document.title = `${a} - ${Math.floor(Math.random()*100)}`;
      },[a])
      return <div> {a} </div>
    }