我們在寫函式時，基本上都會回傳 return 值，
但如果今天除了 return 值以外的元素，因為 return 值的不同而有所變化，
需要做出對應的渲染呢？

useEffect 在做什麼？

useEffect 讓我們可以在函式中操作副作用，副作用的意思是什麼？
指的是函式的返回值影響到其他區塊的呈現，
例如：當我點選「今天」的班機時刻表，需要打 API 抓出「今天」的班機表、
在搶票時，點下搶票按鈕，需要去判斷票的販售狀況，並回應是否還有票的訊息

useEffect 還有另一個作用，也就是執行 Callback function，
舉例來說，當 useState 被觸發後，我們希望可以觸發另一個方法，來依照變數的不同回傳不同的結果，這時候我們就能用 useEffect

useEffect 該怎麼使用呢？

以昨天的計數器來舉例，當計算後的結果是負數時，要提醒他

step 1. import useEffect

將 useEffect 方法引入，並且加上目前結果為負數

import { useState, useEffect } from "react";
import "./App.css";

function App() {
  const [count, setCount] = useState(0);

  function changeCount(e) {
    if (e.currentTarget.id === "reducer") {
      setCount(count - 1);
    } else {
      setCount(count + 1);
    }
  }

  return (
    <>
      <div className="counter">
        <button className="button" id="reducer" onClick={changeCount}>
          -
        </button>
        <div className="number">{count}</div>
        <button className="button" id="addition" onClick={changeCount}>
          +
        </button>
      </div>
      <p className="notice">目前為負數</p>
    </>
  );
}

export default App;

step 2. 使用 useEffect 來更新

import { useState, useEffect } from "react";
import "./App.css";

function App() {
  const [count, setCount] = useState(0);

  function changeCount(e) {
    if (e.currentTarget.id === "reducer") {
      setCount(count - 1);
    } else {
      setCount(count + 1);
    }
  }
  
  useEffect(() => {
    if (count < 0) {
      document.querySelector(".notice").style.display = "block";
    } else {
      document.querySelector(".notice").style.display = "none";
    }
  }, [count]);

  return (
    <>
      <div className="counter">
        <button className="button" id="reducer" onClick={changeCount}>
          -
        </button>
        <div className="number">{count}</div>
        <button className="button" id="addition" onClick={changeCount}>
          +
        </button>
      </div>
      <p className="notice">目前為負數</p>
    </>
  );
}

export default App;

我們將判斷式放入 useEffect 中，判斷結果是否為負數，
是負數的話，就顯示目前為負數，不是的話，就無需顯示

useEffect 有第二個參數，叫做 dependencies

這個參數表示我們要請 useEffect 去偵測哪個元素有更新，
所以我們要把 count 塞進去，讓他去偵測 count 的變化，並且觸發 useEffect。

有時候會看到 dependencies 是空陣列，代表著要監督所有的元素，一旦有其中一個元素更新了，就要觸發 useEffect。

useEffect 運作原理

在 useEffect 可以學到什麼 JavaScript 原理？

今天我們要提到 Callback function

我們用個概念來講好了，今天把 Callback function 想像成是一顆球，

我們會將這顆球傳遞到另一個 function 中做使用，

也就是說， Callback function 指的是將 function 在另一個 function 中做為參數使用

useEffect(<didUpdate>, [dependencies])

useEffect 的 didUpdate function 就是 Callback function 的概念

Callback function 跟其他的 function 一樣，差別在於會被當作參數，並且在 function 中呼叫