iT邦幫忙

2021 iThome 鐵人賽

DAY 15
0
Modern Web

看初心者怎麼學React系列 第 15

Day15 Hook-useRef

Hook的useRef函式用於function component有分兩種方式做介紹,
請先在要使用的元件js檔前import引入喔!
(因為之後範例要使用其他Hook函式,就一次全部引入)

import React, { useRef,useState,useEffect } from 'react';

功能1 - 取得DOM元素

再複習一次,React的function component在資料變動後,元件也會被重新渲染,元件中Html的DOM節點當然也是,雖然結構看起來沒有變化,Html的DOM裡面的位址也被重新指向了,你畫面上的DOM不是原來的DOM啊!

所以,我們利用useRef將DOM以ref物件回傳,這個ref物件不會因為元件更新而被重新創造,利用回傳ref物件中唯一屬性current,就能得到第一次渲染時取得的最原始的DOM節點了。

使用方法

宣告一個變數接收useRef()的回傳值,用在取得DOM的useRef()我們通常會給他初始值 null ,表示ref物件裡的current是空的。(Hook函式請寫在function component之中)

const refText =useRef(null)

接著在JSX中的html tag放上ref屬性綁定(我加上useState放資料跟一個函式看改變資料跟看console.log)

const [count,setCount]=useState(0)
const stateChange =()=>{ 
      console.log(refText.current)
      setCount(count+1)
    }

 return (
    <div >
			<button onClick={stateChange}>
	      Press Me to change state
	    </button>

      <p id='check' ref={refText}> //綁定!
      state:{count}
	    </p>

    </div>
  );

DOM的資訊就會被存放在ref物件的current之中了

console.log( refText.current )看一下
https://ithelp.ithome.com.tw/upload/images/20210930/20140303YqSazr6Pyg.png

得到DOM了!


功能2 - 儲存資料

奇怪不是有useState了,為什麼要用useRef存資料?
因為useRef有個特性,由useRef 建立出來的資料在被改變時並不會重新渲染畫面。
當你想儲存某些會變動的數據。但卻不想重新渲染元件的情前下,就能用useRef儲存資料。

將useRef.current的初始資料設為1,代表第一次的點擊

const refData =useRef(0)

方法一的範例中加入使用refData對照的code

const [count,setCount]=useState(0)
const stateChange =()=>{ 
      setCount(count+1)
    }

/*變動refData資料*/
    const refChange=()=>{
      refData.current=refData.current+1
			console.log('ref點擊次數:',refData.current)
    }

return (
    <div >
      <button onClick={stateChange}>
      Press Me to change state
    </button>
    
      <p id='check' ref={refText}>
      state:{count}
	    </p>

	//refData資料變動顯示的code
    <button onClick={refChange}>
      Press Me to change ref
    </button>
      <p >
      ref:{refData.current}
    </p>

    </div>
  );

從下面畫面看到,我已經點擊下方按鈕3次了,但畫面都沒更新
https://ithelp.ithome.com.tw/upload/images/20210930/20140303KRPdVes2pH.png

讓我點擊上方按鈕更新useState的資料
https://ithelp.ithome.com.tw/upload/images/20210930/20140303qej7Sn0Tc0.png

當useState資料變動後,component才重新渲染元件,把useRef改變的值渲染到畫面上。

下面是元件js檔中完整的code

import React, { useRef ,useState,useEffect} from 'react';

function UseRef() {

  const [count,setCount]=useState(0)

   const refText =useRef(null)
   const refData =useRef(0)

    const stateChange =()=>{ 
      console.log(refText.current)
      setCount(count+1)
    }
    const refChange=()=>{
      refData.current=refData.current+1
      console.log('ref點擊次數:',refData.current)
    }

  return (
    <div >
      <button onClick={stateChange}>
      Press Me to change state
    </button>
    
      <p id='check' ref={refText}>
      state:{count}
    </p>
    <button onClick={refChange}>
      Press Me to change ref
    </button>
      <p >
      ref:{refData.current}
    </p>
    </div>
  );
}

export default UseRef

上一篇
Day14 Custom Hooks
下一篇
Day16 React-Router(一)基本路由
系列文
看初心者怎麼學React30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言