第三組讀書會 5-4 ~ 5-5

[jolinhappy]

《React 進化思維》5-4 ~ 5-5 讀書會討論筆記

簡報: https://hackmd.io/@jingcc/Sy5d8n4LC

導讀人： Vera
筆記工： 粉粉

5-4 React 18 的 effect 函式在 mount 時為何會執行兩次？

• 主要目的：為了幫助開發者檢查副作用處理是否安全可靠，所以會去模擬「mount ⇒ unmount ⇒ mount 行為」，讓開發者去檢查自己的 component 是否有因為這樣重複 mount 而壞掉。
• React 的未來版本的規劃中，有些功能(ex. Hot Refresh, Offscreen API)會需要 component 的副作用處理被設計得足夠彈性，即使多次 mount 與 unmount 也不會壞掉
• Resuable State 概念
  • 當畫面中移除 component 後，仍會可以保留 component state 狀態，以便在需要時可以快速還原並再次 mount
• 結論：副作用的設計需要滿足「無論重複執行多少次都不會壞掉」的彈性。

5-5 副作用處理的常見情境設計技巧

• 常見副作用設計問題
  • 疊加性質而非覆蓋性質操作
    • 可以透過設計 cleanup function 來做取消或逆轉處理
  • Race condition
    • 可以透過設定一個flag或是使用第三方套件來處理
  • Memory leak
    • 可以透過設計 cleanup function 來做清除前一次的副作用

討論

• Race Condition 的處理

  • Lois：公司內部有使用axios abort的方式來取消舊的請求
    (https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort)
  • 情境分享：
    • 一個可以觀看課程影片的平台，當點入一個課程影片中，影片還回fetch回來時，又切換一個課程時，那一開始 fetch 影片的動作就可以中斷。
    • 一個可以下載手冊的商品 demo 頁面，使用者點擊下載後，server 反應很慢，使用者不想等待，覺得沒有反應後，就切換頁面，但是在切換到其他頁面後，卻又開始下載檔案，對使用者來說就變成是一個很奇怪的情況，所以就在跳轉頁面加上 abort 的處理，避免這個狀況發生。
  • 其他參考資料：https://uu9924079.medium.com/避免-ajax-造成的-race-condition-9db32b8415a4

• 關於第三方套件解決方案，大家有前用過apollo嗎？相關第三方套件的差異在哪裡？

  • Lois：主要使用在graphQL上
  • 相關套件的差異比較文章：https://cangsdarm.github.io/react-query-web-i18n/react/getstarted/comparison/

• 通常是用手刻嗎？還是套件整合起來比較方便嗎？

  • 會有一些快取，和效能上的優化。
  • Isla：現有的套件基本上已經做到很好的優化，且如果社群支援度好的話，使用套件可能會更便利和合適，除非公司內部有特殊的需求需要自己手刻。

• 想請問各位在使用 react query 主要運用哪些功能？

  • fetch API
  • 快取、非同步
  • 使用它處理好的 isLoading 和 error