技術問答
技術文章
iT 徵才
Tag
聊天室
2025 鐵人賽
登入/註冊
問答
文章
Tag
邦友
鐵人賽
搜尋
2024 iThome 鐵人賽
DAY
17
0
佛心分享-IT 人自學之術
【現在學React還來得及嗎?】30天Takeaway分享
系列 第
17
篇
【Day17】Effect2
16th鐵人賽
react
haruowang
2024-08-21 09:44:00
573 瀏覽
分享至
Takeaway
useEffect的前身是生命週期函數componentDidMount、 componentWillUnmount和componentDidUpdate
useEffect讓函式組件(Functional Component)也能有自己的生命周期
useMemo:可以儲存複雜的計算結果
可以使用console.time + console.timeEnd了解計算的耗時程度
在props發生變化時調整部分頁面(譬如可勾選的列表):用陣列方法直接調整回傳的props最高效,而不是用useEffect或改state
Effect只用來執行「組件一顯示時就要執行」的程式碼,否則有其他互動的話就是事件處理的邏輯了
如果是想讓state的變化被父組件得知:可用狀態提升
如果想要訂閱外部儲存(如Redux Store、瀏覽器API等):更適合用專門的useSyncExternalStore
比起掛載和卸載,Effect的生命週期更接近多次開始和停止同步
每次渲染時都會有各自對應的Effect。而且由於函式組件的閉包特性,這些Effect的值各自都是不變的(immutable)
每個useEffect都該是各自獨立的
ref.current不能拿來當依賴項:因為ref的特質就是更改也不會重渲染
React的程式碼檢查工具會提示React Hook useEffect has missing dependencies
useLayoutEffect:只有執行時機不同於useEffect,瀏覽器會先執行程式再重繪頁面。雖然可以讓畫面不會發生惱人的閃爍,但可能拖累效能,建議在特殊狀況下使用
useEffect可以用來抓API,但React官方推出的Suspense組件更加適合
留言
追蹤
檢舉
上一篇
【Day16】Effect1
下一篇
【Day18】Effect3
系列文
【現在學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
組
累計文章數
10962
篇
完賽人數
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 }}