技術問答
技術文章
iT 徵才
Tag
聊天室
2025 鐵人賽
登入/註冊
問答
文章
Tag
邦友
鐵人賽
搜尋
2024 iThome 鐵人賽
DAY
16
0
佛心分享-IT 人自學之術
【現在學React還來得及嗎?】30天Takeaway分享
系列 第
16
篇
【Day16】Effect1
16th鐵人賽
react
haruowang
2024-08-20 15:09:20
370 瀏覽
分享至
Takeaway
讓組件和React之外的系統同步
一般來說,副作用得在事件處理函數裡發生。但要是沒有特定的觸發事件,就可以使用Effect包裹副作用
不要太常使用Effect
編寫Effect的三步驟:宣告 → 指定 → (清理)
Effect預設會在每次渲染後執行,所以要指定依賴
React使用Object.is來確認依賴項是否發生變化
如果依賴項不會改變,可以不用特別清理
依賴陣列如果設定空陣列,代表組件掛載後才會執行useEffect
ref和set函數都是穩定的,所以不用放進依賴陣列
但如果無法確認傳來的是不是同個ref等等,就要放了
開發環境下,會連接兩次,斷開一次。React會多測試,不要用ref阻止
利用useEffect處理非同步請求fetch時,可能會因為請求切換太快,而遇到競態條件(Race Condition)。不引入其他套件的應對方式有AbortController
關於切換太快的效能優化方式還有節流(Throttle)函式
如果想要緩存資料而不是刪掉再請求:可使用React Query、useSWR和 React Router v6.4+等第三方解決方案
Intersection Observer:常用來觀察元素在視窗裡的可視程度
如果要使用的資料只需要載入一次,如確認登入狀態或使用本地資料,可以寫在useEffect之外
業務邏輯(如按鈕購買)不該放在useEffect裡,而該寫到事件處理函數
留言
追蹤
檢舉
上一篇
【Day15】ref
下一篇
【Day17】Effect2
系列文
【現在學React還來得及嗎?】30天Takeaway分享
共
30
篇
目錄
RSS系列文
訂閱系列文
4
人訂閱
26
【Day26】R3F 2
27
【Day27】R3F 3
28
【Day28】React Leaflet 1
29
【Day29】React Leaflet 2
30
【Day30】React Leaflet 3
完整目錄
熱門推薦
{{ item.subject }}
{{ item.channelVendor }}
|
{{ item.webinarstarted }}
|
{{ formatDate(item.duration) }}
直播中
立即報名
尚未有邦友留言
立即登入留言
iThome鐵人賽
參賽組數
902
組
團體組數
37
組
累計文章數
10974
篇
完賽人數
102
人
看影片追技術
看更多
{{ item.subject }}
{{ item.channelVendor }}
|
{{ formatDate(item.duration) }}
直播中
熱門tag
看更多
15th鐵人賽
16th鐵人賽
13th鐵人賽
14th鐵人賽
12th鐵人賽
11th鐵人賽
鐵人賽
17th鐵人賽
2019鐵人賽
javascript
2018鐵人賽
python
2017鐵人賽
windows
php
c#
windows server
linux
css
react
熱門問題
Esxi 8.0版本上的虛擬機器, 安裝的作業系統是Windows Server 2025, 確定輸入的密碼是正確的, 無法登入(顯示密碼錯誤)
HP iLo Advanced trial license
在線求大神,千奧軟體主機怎麼安裝
因為網路磁碟的關係造成系統自動重新開機
Docker Compose 建立 GitLab 容器,執行器 Runner 運行流水線問題
windows server無法使用gpedit.msc
Java證照題目(main() method)
iatf16949資訊稽核
iatf16949資訊稽核內容
*5* Complete List of™️ Disney Cruise® Service™️ Contact Numbers in the USA
熱門回答
Esxi 8.0版本上的虛擬機器, 安裝的作業系統是Windows Server 2025, 確定輸入的密碼是正確的, 無法登入(顯示密碼錯誤)
因為網路磁碟的關係造成系統自動重新開機
iatf16949資訊稽核
windows server無法使用gpedit.msc
熱門文章
第4天,數位憑證的產生 / 中崙張記藥膳排骨 排骨讚(台北松山)| 30天滷肉飯
第4天,Cloudflare Public DNS 與 WARP / 滷小小 美味的滷味 | 30天板橋湳雅夜市
[為你自己學 n8n] 第 4 天,節點大師之路:產生寶可夢、篩選、算戰力!
Day 17- 分離關注點:設定與主要邏輯分開
第5天,數位憑證的格式 PEM、DER / 小辣椒魷魚羹(台北萬華)| 30天滷肉飯
IT邦幫忙
×
標記使用者
輸入對方的帳號或暱稱
Loading
找不到結果。
標記
{{ result.label }}
{{ result.account }}