前天我們介紹了，Hook 中最好入門的 useState，今天就來要來介紹他的好兄弟，就是 useEffect

關於 useEffect

我們來看一下對於 useEffect 我們做出個的簡單範例演示一下

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

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

  const onCount = () => {
    setCount(count + 1 )
  }

  useEffect(() => {
    console.log(`進入 ${count} useEffect`);
  }, [])

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={onCount}>
        Click me
      </button>
    </div>
  );
}

export default App;

實際操作之後，就會知道每當我們按下 button 之後，count 變數會改變，因為我們使用了 useState，我想這點聰明的大家都知道

但是為什麼我們的網頁的標題也會跟著改變呢，讓我們看到這一行

  useEffect(() => {
    document.title = `我是點擊次數 ${count}`
    console.log(`進入 ${count} useEffect`);
  },[count])

我們將 count 變數放到了 useEffect，裡面並使他改變
網頁的標題，那我們來看看 useEffect，要怎麼使用，並且他所接受的參數是什麼，以及他什麼時候會執行，清況可以分為下列三種

useEffect(function, [dependency])

useEffect 的執行種類

Once

顧名思義是 useEffect 只會在初次渲染的時候執行 useEffect

若以我們剛剛的範例為例的話，我們將剛剛的範例改為這樣，將第二個參數改為空陣列的話，就只會在第一次渲染時執行

useEffect(() => {
	console.log(`進入 ${count} useEffect`);
	document.title = `我是點擊次數 ${count}`
},[])

after every render

也就是在我的 component 或是稱之為 function，每次執行時，也就是每次渲染畫面時，執行 useEffect，已我們的例子為例就是將第二個參數拔掉，不給他第二個參數

useEffect(() => {
	console.log(`進入 ${count} useEffect`);
	document.title = `我是點擊次數 ${count}`
})

但是要小心若你的 Component，若是因為別的 State 改變而進行渲染時，都會執行它
所以出現了第三種的狀況

state/props change

則是依照第二個參數 [dependency]，若有改變時才會執行 useEffect， 也是依照剛剛的例子為例，我們將第二個陣列中放入count 變數，那 useEffect，的執行時機就會變成是當 count 改變時才會執行，也因為第二個參數 [dependency] 是陣列，所以你可放入許多的值，
包括 props 或是 state，在當你想要執行時 useEffect 時候

useEffect(() => {
	console.log(`進入 ${count} useEffect`);
	document.title = `我是點擊次數 ${count}`
}, [count])

小結

今天介紹了 useEffect 的參數，明天會是試著用一個例子來更進一步介紹，useEffect，在實際的專案中的用途。