[TOC] ## useEffect `useEffect` 是一個 React Hook，它允許你 [將組件與外部系統同步](https://zh-hans.react.dev/learn/synchronizing-with-effects)。 語法: ``` useEffect(setup, dependencies?) ``` ## 示例 ### 觸發機制 ``` // 只在首次更新 useEffect(() => { console.log("start") }, []) // 每次更新 useEffect(() => { console.log("every change") }) // count 依賴更新 useEffect(() => { console.log("change count",count) }, [count]) // count2 依賴更新 useEffect(() => { console.log("change count2",count2) }, [count2]) ``` 當傳入空數組時,為首次渲染時觸發 ### cleanup ``` import { tree } from 'next/dist/build/templates/app-page'; import { useEffect, useState } from 'react'; function Counter({value}:{value:string}){ useEffect(()=>{ console.log("value",value) return ()=> { console.log("unmount",value) // 當 value 從aa切換到 bb 時, 會觸發 "unmount,aa" // 當 設置為 show = false 時, 也會觸發 "unmount,bb" } },[value]) return <div> <p>{value}</p> </div> } export default function Demo(){ const [value,setValue] = useState("aa"); const [show,setShow] = useState(true) return <div> {show && <Counter value={value} />} <button onClick={()=>setValue("bb")}>button bb</button> <button onClick={()=>setShow(!show)}>button show</button> </div> } ``` > 組件注銷或變更prop 時,會執行 useEffect 的清理函數 > 為了 幫助你發現 bug，在開發環境下，React 在運行 setup 之前會額外運行一次setup 和 cleanup。這是一個壓力測試，用于驗證 Effect 邏輯是否正確實現 ### 與 window 通信 ``` useEffect(() => { console.log(window) // ok }, [count]) console.log(window) //Uncaught ReferenceError: window is not defined ``` ### 在自定義 Hook 中封裝 Effect 封裝 ``` function useChatRoom({ serverUrl, roomId }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnection(options); connection.connect(); return () => connection.disconnect(); }, [roomId, serverUrl]); } ``` 調用 ``` function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ roomId: roomId, serverUrl: serverUrl }); // ... ```