react 中useRef的作用

react 中useRef的作用

 

import React,{useEffect, useState,useRef} from "react"
/* 
1.保存一個值,在整個生命周期中維持不變
2.重新賦值ref.current不會觸發重新渲染
*/
export default function UseRef(){
    // 返回一個數組,第一個值是狀態,第二個是改變狀態的函數
  const [num, setNum] = useState(1);

    const ref = useRef()
    console.log(ref.current);
    
    useEffect(() =>{
        // ref.current =setInterval(() =>{
        //     setNum((num) => num+1)
    
        // },400)
        ref.current ="111" //頁面沒有展示,說明沒有觸發視圖的渲染 功能之2二
    },[])

    useEffect(() =>{

        if(num >10){
          console.log(ref.current);
            // 清除定時器
            clearInterval(ref.current)
        }

    },[num])

    return(
        <div>這是一個函數式組件--{ref.current} </div>
        
    )
}