iT邦幫忙

2023 iThome 鐵人賽

DAY 15
0
SideProject30

30 天大冒險:新手勇闖 React 大秘境系列 第 15

DAY 15 - 今天來點 useRef

  • 分享至 

  • xImage
  •  

⭐ 任務說明

😸今天學習如何使用 useRef!

useRef 是什麼

  • 透過 useRef 建立一個 ref 對象,並且將他賦予到 React 元件中的 DOM 元素上。
  • 用來保存不需要重新渲染的資料

如何使用

  • 先來看看基本用法
const ref = useRef(initialValue)

試試看

  • 我們將透過 ref 取得元件內的 DOM 元素

    • 做一個點選按鈕後取得輸入框的內容
      img
  • 程式碼

  • 做一個會一直變動的計數,而畫面上的值將透過使用 useRef ,他是不會重新渲染的
    img

  • 程式碼

結語

學會 useRef 了嗎?我們下個任務見!


上一篇
DAY 14 - 請給我 useContext!
下一篇
DAY 16 - 複雜交給 useReducer
系列文
30 天大冒險:新手勇闖 React 大秘境30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言