技術問答
技術文章
iT 徵才
Tag
聊天室
2025 鐵人賽
登入/註冊
問答
文章
Tag
邦友
鐵人賽
搜尋
2024 iThome 鐵人賽
DAY
15
0
佛心分享-IT 人自學之術
【現在學React還來得及嗎?】30天Takeaway分享
系列 第
15
篇
【Day15】ref
16th鐵人賽
react
haruowang
2024-08-19 15:35:49
425 瀏覽
分享至
Takeaway
useRef可以拿來傳參考,畢竟用了Reference嘛
不想觸發渲染時:使用ref。所以在渲染期間讀取ref是沒用的
如果直接更新useRef,不會被偵測到,是在做React管轄以外的互動,將造成副作用。所以我們會在事件處理函數或Effect裡讀取ref,並搭配使用
useRef就像沒有setter的useState
但useState回傳的是陣列,useRef回傳的是物件
受控組件:讓State成為單一資料源
非受控組件:使用原始DOM或ref
ref的current屬性可以被點記法修改
ref適合timeout ID和DOM元素
可以像.current.focus()這樣使用瀏覽器API
Hook只能在組件頂端調用,所以map裡不能包ref
但是ref裡可以包著map!
ref callback:當ref對象會變化時,將函數傳遞給ref。譬如用ref包住map
ref callback跟拿來記憶函數,減少渲染的useCallback不一樣喔
組件不能用ref,除非使用forwardRef暴露DOM節點
useImperativeHandle:限制暴露的只剩下控制代碼(Handle),而不是DOM節點。這時候能調用的就只剩下你設定的那個方法(如focus)
flushSync:強制DOM同步更新的最後手段,通常是和第三方程式碼(如UI函式庫或者瀏覽器API)整合時使用
避免重複創建ref:初始化ref,加上if判斷:current是null的時候再執行
useState類似Vue的ref;useRef則是類似Vue的v-model,可拿來取得input的value
留言
追蹤
檢舉
上一篇
【Day14】Context
下一篇
【Day16】Effect1
系列文
【現在學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
組
累計文章數
10984
篇
完賽人數
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資訊稽核
windows server無法使用gpedit.msc
熱門文章
第4天,數位憑證的產生 / 中崙張記藥膳排骨 排骨讚(台北松山)| 30天滷肉飯
第4天,Cloudflare Public DNS 與 WARP / 滷小小 美味的滷味 | 30天板橋湳雅夜市
[為你自己學 n8n] 第 4 天,節點大師之路:產生寶可夢、篩選、算戰力!
第5天,數位憑證的格式 PEM、DER / 小辣椒魷魚羹(台北萬華)| 30天滷肉飯
Day 17- 分離關注點:設定與主要邏輯分開
IT邦幫忙
×
標記使用者
輸入對方的帳號或暱稱
Loading
找不到結果。
標記
{{ result.label }}
{{ result.account }}