技術問答
技術文章
iT 徵才
Tag
聊天室
2025 鐵人賽
登入/註冊
問答
文章
Tag
邦友
鐵人賽
搜尋
2024 iThome 鐵人賽
DAY
18
0
佛心分享-IT 人自學之術
【現在學React還來得及嗎?】30天Takeaway分享
系列 第
18
篇
【Day18】Effect3
16th鐵人賽
react
haruowang
2024-08-22 08:01:00
365 瀏覽
分享至
Takeaway
useEffect的”Effect”是副作用
使用useEffect呼叫api時,可以加上布林判斷let ignore = false結合if (!ignore),避免資料回傳速度不一致所造成的競態條件
事件處理函數的邏輯是非響應,除非有互動
useEffectEvent:用來處理Effect裡不想要產生響應的邏輯
在useEffect裡調用Effect Event:Effect Event()
不要把Effect Event傳給其他組件或Hook
Eslint有可能會抑制React原生的檢查工具
將靜態、不會變的東西移到組件外;將動態的東西移到Effect內
如果擔心各自獨立的useEffect太重複,可把共通邏輯寫到自訂的Hook
自訂Hook共享的是邏輯,想要共享State請用狀態提升
自訂Hook的好處:讓資訊流更容易看清,譬如useData(url)就像是輸入url會輸出data;如果自訂Hook裡的Effect想升級成更好用的功能(例如useSyncExternalStore),也不需要動到組件
higher order components VS render props VS custom hook:三者都想複用邏輯
高階組件(HOC):傳入一個組件,這個函數(HOC)會回傳被包裝的新組件,例如Redux的connect()。適合搭配條件渲染,缺點是一個組件裡只能用一次HOC,以及使用太多層的話會引起Wrapper Hell
Render Props:把函式放在props裡傳遞,而那個函式會渲染元素,因此得名。容易嵌套太深
留言
追蹤
檢舉
上一篇
【Day17】Effect2
下一篇
【Day19】Recap1
系列文
【現在學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
組
累計文章數
10920
篇
完賽人數
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資訊稽核內容
熱門回答
Esxi 8.0版本上的虛擬機器, 安裝的作業系統是Windows Server 2025, 確定輸入的密碼是正確的, 無法登入(顯示密碼錯誤)
因為網路磁碟的關係造成系統自動重新開機
iatf16949資訊稽核
【求助】顯卡/主板 支援 PCIe4.0 為何 Host to Device (H2D) 只剩 Gen1 速度 (0.5 GB/s) ?
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 }}