React 思維進化

# React 思維進化 * React 中的副作用處理-初探 Effect * useEffect 其實不是生命週期 API --- ## React 中的副作用處理 **-初探 Effect** 什麼是 useEffect? useEffect 是一個 React Hook 可以讓 component 與外部系統同步化 ---- 如何同步化? -- <div> 將 Component 以外的資料</div> <div> 同步化到 Component 內部</div> -- <div> 將 Component 內部的資料流與外部系統同步</div> ---- 對伺服器、後端API發出請求  監聽某些事件  存取 React 外部的狀態管理套件 "外部系統" => 是指某些 React 無法控制的程式碼  ---- ![image](https://hackmd.io/_uploads/B1iseUm40.png)  --- ## 什麼是副作用? side effect? ---- 函式除了回傳一個結果值以外還依賴或影響函式外部以外的其他東西影響變數等等操作 ```===javascript let globalVariable = 0 function calculateDouble(number){ globalVariable +=1 fetch(/*....*/).then((res) => { /*....*/ }) document.getElementById('app').style.color = "red" return number*2 } ``` ---- 副作用聽起來不好? 但是有時候我們就需要它的副作用的影響或效果，同時的，副作用可能會造成一些負面的影響。 * 可預期性降低  * 測試困難  * 高耦合度  * 難以維護和理解  * 優化限制 ---- 若在 Component Fn 中直接處理副作用程式碼一些累加可能拖慢 React Element 的產生可能影響到使用者體驗差  ![1716939136221](https://hackmd.io/_uploads/ryx6tkENC.png) ---- 我們可使用 useEffect 隔離副作用使之在每次 render 更新完成後才執行就不會有機會造成 Component fn 產生 React Element 時被阻塞避免副作用的處理直接阻塞畫面的產生與更新 ---- 所以我們需要 useEffect 來處理副作用 清除或逆轉產生的副作用影響 避免副作用疊加所造成的不可預期性的錯誤 ---- 如何清除副作用? * 當 component 隨著每次 re-render，需重複執行副作用後，(若有產生)都會需要清掉前次產生的副作用。 * 解決方式: => 回傳 cleanup fn，透過建立 cleanup fn 來清除副作用所造成的影響。 * 時機點: 會在每次副作用執行前，或 unMount 的時候被執行。 ---- 若有副作用的產生但沒使用 cleanup fn 清除副作用產生的影響可能 component 被 unmount 還在持續觸發事件導致 memory leak 以及效能浪費等問題 ---- 什麼是 memory leak (記憶體洩漏)? 當一段程式碼不在使用某些記憶體，但該段記憶體卻未被適時釋放，導致記憶體無法被其他程式使用或重新分配導致系統可使用記憶體越來越少。   ---- 與外部伺服器連線，建立 connection ```===javascript import { useEffect } from 'react'; import { createConnection } from './chat.js'; function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useEffect(() => { const connection = createConnection(serverUrl, roomId); connection.connect(); return () => { connection.disconnect(); }; }, [serverUrl, roomId]); // ... } ``` --- useEffect(effectFunction, dependencies?) effect fn 若無回傳 cleanup fn， effect fn 回傳 undefined cleanup fn 清除副作用所造成的影響 dependencies 可選填的陣列參數 優化效能 ---- 以 useEffect 來定義並管理一段副作用可分成此三大步驟: 1. 定義一個 effect 函式來處理副作用 2. 加上 cleanup 函式來清除副作用所帶來的影響(若有需要的話) 3. 指定 effect 函式裡的依賴陣列，以跳過某些不必要的副作用處理，避免效能浪費 --- Dependencies 參數 * 用來告知 React effect 函式是否可以在某些次 re-render 時跳過執行。 * 陣列內放的每一個數值會經過 `Object.is()` 判斷數值是否有被更新，若無更新，此次可安全跳過執行此副作用可避免浪費效能 * dependencies 陣列應包含 effect fn 在此 component 所依賴影響的資料項目。 如: props, state, 或任何受到資料流所影響的延伸資料。 ---- 是用來控制執行時機? * 直接不提供 dependecies 參數 => 每一次 re-render 都要執行副作用 沒有 dependenecies 幫助優化的陣列參數，每次都要執行副作用 * 在 dependencies 提供一個空陣列 => 僅有初次 render 時執行此副作用，re-render 都可以跳過執行 有 dependenecies 幫助優化的陣列參數，但依賴需執行的變數不存在，故只有初次渲染要執行副作用 --- Component 每次 render 都有其自己版本的 props, state, event handlers, effect 函式, cleanup 函式，會透過 closure 的特性，捕捉並記住該次 render 中 props 和 state 的快照。 [repo 範例](https://codesandbox.io/p/sandbox/useeffect-render-example2-vywz9w?file=%2Fsrc%2FSubscriptionComponent.js%3A6%2C53) ----  ```flow! st=>start: 首次 Render e=>end: 結束 op=>operation: 從 useState 取得目前的 state值為1 作為快照值 op2=>operation: 以目前的資料流建立 event handler, effect fn, cleanup fn op3=>operation: 以state 快照值產生新的畫面 React Element 綁定資料(event handler) op4=>operation: 轉換 RE, 並繪製到實際的DOM上 op5=>operation: 執行 effect 函式 op6=>operation: (首次render跳過)執行前次 cleanup 函式 st->op->op2->op3->op4->op6->op5 ``` ----  ```flow! st=>start: 經過一次按鈕點擊，執行setCurrentOrder(currentOrder + 1)，觸發 re-render e=>end: 結束 op=>operation: 執行到 useState時，React 在內部執行之前呼叫 setState的動作。將待計算動作完成，並將 state的值取代更新為 1+1= 2 op1=>operation: 從 useState 取得目前的 state 作為快照值 op2=>operation: 以目前的資料流建立 event handler, effect fn, cleanup fn op3=>operation: 以state 快照值產生新的畫面 React Element 綁定資料(event handler) op4=>operation: 轉換 RE, 並繪製到實際的DOM上 op5=>operation: 執行 effect 函式 op6=>operation: 執行前次 cleanup 函式 st->op->op1->op2->op3->op4->op6->op5 ``` --- React 中的副作用處理: effect 初探章節重要觀念自我檢測 `---` * 什麼是副作用？為什麼我們需要透過 `useEffect` 在 React component function 中處理副作用？ * 以 `useEffect` 來處理一段副作用的三大步驟是什麼？ ---- React 中的副作用處理: effect 初探章節重要觀念自我檢測 `---` * 解釋「每次 render 都有其自己版本的 effect 與 cleanup 函式」是什麼意思？ * 一次 render 中的 effect 函式與 cleanup 函式會在什麼時間點被執行？ --- ## useEffect 是宣告式的同步化而非生命週期API `----` useState 方法更新資料  useEffect 的用途: 是將 "原始資料" 同步化到畫面以外的副作用處理上 ---- 宣告式與指令式程式設計 React vs. JavaScript 宣告式: 只關注結果，不管如何達成目的指令式: 一一步驟告知執行的順序，來達到結果 ---- useEffect 也是以宣告式的概念來設計    但其實 useEffect 副作用處理將原始資料同步化到 React Element 以外的東西上無論重複 render 了幾次資料流與程式邏輯都應該保持同步化與正常操作 ---- 為什麼要以 useEffect 的資料流同步化取代生命週期API? 什麼是生命週期API?  [React Component Lifecycle - Hooks / Methods Explained](https://www.youtube.com/watch?v=m_mtV4YaI8c) ---- class component 生命週期API: 1. constructor: 建立 component 2. componentDidMount: component 首次 render 執行 3. componentDidUpdate(prevProps, prevState, snapshot?): component re-render 後執行 4. componentWillUnMount: component 被 unMount，移除前執行 5. shouldComponentUpdate(nextProps, nextState): 通常用來優化性能，預設返回 true，若返回 false 可以防止 component 被 re-render ---- class component 生命週期API: 6. getDerivedStateFromProps(props, state): React 會在render(初次render,或更新re-render)前執行。它會回傳 object 來更新 state,或是 null 不執行更新。 7. getSnapShotBeforeUpdate(prevProps, prevState): React 在 React 更新 DOM之前呼叫它. 讓 component 抓取 DOM 在更新以前的資訊 (e.g. scroll 位置) 回傳值會傳入componentDidUpdate 的參數 9. componentDidCatch(error,info): 當發生錯誤時，React 會按照定義錯誤訊息顯示在畫面上。 ---- Component 初次 render 訂閱狀況 ```javaccript= componentDidMount(){ OrderAPI.subscribeStatus( this.props.id this.handleStatusChange ) } componentWillUnMount(){ OrderAPI.unsubscribeStatus( this.props.id this.handleStatusChange ) } ``` ---- componentDidUpdate 不會自動抓取前次的 id 取消訂閱也不會自動以新的 id 來重新訂閱 => 進而造成 memory leak 等問題  ```javaccript= componentDidMount(){ OrderAPI.subscribeStatus( this.props.id this.handleStatusChange ) } componentDidUpdate(prevProps){ OrderAPI.unsubscribeStatus( prevProps.id this.handleStatusChange ) OrderAPI.subscribeStatus( this.props.id this.handleStatusChange ) } componentWillUnMount(){ OrderAPI.unsubscribeStatus( this.props.id this.handleStatusChange ) } ```  ----  useEffect 從 didMount + didUpdate + willUnMount 中提取其中副作用來統一整合  只需要一個 useEffect 搞定  只要定義一段描述同步化的邏輯然後再按需求加上 cleanup function 去清除可能造成的副作用影響。 --- ## Dependencies 是一種效能優化 -- 而非執行時機的控制 ```javascript= import { useState, useEffect } from "react" export default function App(props){ const [count, setCount] = useState(0) useEffect(() => { document.title = `Hello ${props.name}` },[props.name]) return ( <button onClick={()=> setCount(count + 1)}> Click me </button> ) } ``` ---- 加入 dependencies 流程模擬: * 首次 render 時，確認資料流 props.name = 'foo' 與 state count 的值為 0 1. 渲染出 React Element 產生相對應的 DOM 結構 2. 執行本次 render 對應的 effect 函式，以及對應本次 props.name 的值為'foo' 3. 記憶此 useEffect 的 dependencies 裡的 props.name 值為'foo'，作為下次 effect 函式是否執行的比較依據。 ---- * 經過使用者點擊觸發 setCount，觸發re-render 後，確認資料流 props.name = 'foo' 與 state count 的值為 0 + 1 = 1 1. 比較 React Element 差異，找出要更新的RE，畫面產生相對應的 DOM 處理 2. 檢查 useEffect 的 dependencies 陣列的每一個項目值，找到為一個 props.name，比較與前一次 render 時是否相同 (使用 Object.is() 判斷) 3. 確認相同，可跳過執行此 useEffect 函式 ---- * 若父 Component render 改變了 props.name 為 "bar"，觸發子 component 第三次 re-render，state count 的值仍為 1 1. 比較 React Element 差異，找出要更新的RE，畫面產生相對應的 DOM 處理 2. 檢查 useEffect 的 dependencies 陣列的每一個項目值，找到為一個 props.name，比較與前一次 render 時是否相同 (使用 Object.is() 判斷) ---- 3. 前一次版本的 props.name "foo"，已經更新為 "bar"，須照常執行本次 render 的 effect 函式。 4. 執行本次 props.name 值為 "bar" 的 effect 函式 5. 記憶此 useEffect 中的 dependencies 陣列中所有變數的值，也就是 props.name 值為 "bar" ，做為下一次依賴相比較的依據。 ---- dependencies 能不能放 Object 和 Fn? 放原始型別與 Object 的差異? ![image](https://hackmd.io/_uploads/rkSb45NVC.png)  --- 若沒有任何依賴項，則可以填寫空陣列 但不可以欺騙 React 來試圖控制 effect 函式執行時機 應要改用條件判斷 這個 effect 函式執行的時機  --- useEffect 其實不是生命週期的API 章節重要觀念自我檢測 * `useEffect` 是 function component 的生命週期 API 嗎？為什麼？ * 為什麼 React 要以 `useEffect` 的資料流同步化這種設計來取代生命週期 API？ * `useEffect` 的 `dependencies` 機制的設計目的與用途是什麼？ * 我們可以用 `dependencies` 參數來模擬 function component 生命週期 API 的效果嗎？ --- # The End