## 目錄 - 文章 - 作者 - 一些心得 --- ## 文章 [A Complete Guide to useEffect](https://overreacted.io/a-complete-guide-to-useeffect/#tldr) - by Dan Abramov --- ## 作者  - Redux 的作者 - 目前是 Meta React 的核心開發團隊成員之一 --- ## `useEffect` ```javascript! useEffect(setup, dependencies?) ```  NOTE: 藍色 setup 會執行的程式 黃色 cleanup 下一次 setup 前及元件移除時會叫用的程式 藍紫色 dependencies 供 React 記錄用，優化 setup 執行的手段 --- ## DOM 先繪製，才做 setup >React will let the browser paint the updated screen first before running your Effect. https://react.dev/reference/react/useEffect NOTE: 不是執行到 useEffect 就執行，是會等到 DOM 繪製完畢 --- ## Synchronization, Not Lifecycle https://codesandbox.io/s/synchronization-not-lifecycle-5dxj4j --- ## dependencies 應以效能優化的手段出發，而不是以「什麼時候可以叫用」setup 為導向 https://codesandbox.io/s/synchronization-not-lifecycle-5dxj4ja NOTE: 可以發現沒有再叫用 effects 了 --- ## setup -> checked -> cleanup? -> setup -> loop... https://codesandbox.io/s/synchronization-not-lifecycle-with-clean-up-fhj5th React will compare each dependency with its previous value using the Object. （與嚴格等於 `===` 近 90% 相同） https://react.dev/reference/react/useEffect NOTE: 執行 setup -> 比對 -> 有差異 -> 執行 cleanup -> setup -> 無限重複 --- ## 每次 render 都是自己的 scope，有自己全部的東西 ```javascript! // During first render function Counter() { // ... useEffect( // Effect function from first render () => { document.title = `${0} - Hello`; } ); // ... } // After a click, our function is called again function Counter() { // ... useEffect( // Effect function from second render () => { document.title = `${1} - Hello`; } ); // ... } // After another click, our function is called again function Counter() { // ... useEffect( // Effect function from third render () => { document.title = `${2} - Hello`; } ); // .. } ``` NOTE: 上方範例的流程分解 --- https://codesandbox.io/s/lyx20m1ol --- ## 因為 dependencis 是攸關 setup(effects) 的優化，因此必須對 dependencies 誠實 非 setup 範疇內的值必須放入 dependencis，讓 React 知道什麼時候該繼續執行 setup https://codesandbox.io/s/synchronization-not-lifecycle-dependency-67qy9j --- ```javascript! useEffect(() => { document.title = 'Hello, ' + name; }, []); // Wrong: name is missing in deps ```  ---  NOTE: 大概講一下範例，先看，然後說 refactor 的準則 --- ## 參考資料 - [A Complete Guide to useEffect](https://overreacted.io/a-complete-guide-to-useeffect/#tldr) - [useEffect](https://react.dev/reference/react/useEffect)