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 )看一下

得到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次了，但画面都没更新

让我点击上方按钮更新useState的资料

当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