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>
        
    )
}