iT邦幫忙

2021 iThome 鐵人賽

DAY 29
1
Modern Web

用Jest和Enzyme來寫React測試吧!!系列 第 29

【Day29】從小菜鳥使用React到現在踩到的地雷經驗談 (ᗒᗣᗕ)՞

這篇要來談談小菜鳥一開始到現在用React的時候踩到的地雷 !


最常見的忘記向下傳state就透過子類別使用了

  • 後來小菜鳥的解決方法,是會在父類別將所有有可能會用到的state向下傳,再從子類別使用

使用Class Component的時候,function忘記綁在此Class

  • 這個情況如果沒有在Constructor裡利用bind綁定function且又在function裡使用到this的時候,函式裡會不知道這個this是綁定誰 (會造成 Cannot read properties of undefined的錯誤)
  • 小菜鳥的解決方法 : 每次建立完一個新函式,就先在Construtor裡進行bind

在Class Component裡使用生命週期componentDidUpdate的時候沒有下條件去控制

  • 這個情況會導致,頁面一直重新被render造成無限迴圈 (整個網頁卡住的那種無限迴圈R)
  • 之後每次使用到componentDidUpdate這個生命週期的時候,都會特別去檢查條件是否正確

在使用Function Component Effect的時候,沒有傳入第二個參數(變動的props)

  • 第二個參數是用來監聽props是否變動才去執行effect的,如果沒有傳入,會變成每次render或重新render的時候會一直重複執行effect,有時候傳入太多相關聯的props當作被監聽的對象也可能造成無限迴圈
  • 一開始小菜鳥以為effect在一個Component裡只能用一個,想說...天R~ 這樣我一次監聽多個props會無限迴圈耶... 後來才發現effect在同一個Component上可以使用很多個,所以我都盡量拆開來寫

以上,是小菜鳥開始用React到現在踩過的地雷(>﹏<) ,不知道各位是不是跟小菜鳥一樣,

還是有踩過其他的地雷可以不吝嗇地跟小菜鳥分享!

以後走的路越遠,踩的地雷可能會越多,小菜鳥已經做好心理準備了 !!


上一篇
【Day28】React Query 簡易說明及使用 (´∀`)
下一篇
【Day30】參賽感言
系列文
用Jest和Enzyme來寫React測試吧!!30

尚未有邦友留言

立即登入留言