React,Hooks中useRef的使用

如果父组件想要调用子组件或者子组件里面的方法和数据的话，有时候就会用到useRef

不过useRef有一个很大的特点就是

useRef返回一个ref对象,返回的ref对象在组件的整个生命周期保持不变

什么意思呢？用一个案例来解释

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

export default function UseRefDom2() {
  const [count,setCount] = useState(0)

  const numRef =  useRef(count)
  return (
    

      
 {numRef.current}
       {count}
      setCount(count + 10)}>+10
    
  )
}

当我们点击加的时候numRef.current的值一直没变

因为useRef返回的值在整个生命周期不会改变

下面这样改造一下

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

export default function UseRefDom2() {
  const [count,setCount] = useState(0)
  const numRef =  useRef(count)
  
  //会记录每一个的值
  useEffect(()=>{
    numRef.current = count
  },[count])
  return (
    

      
上一次的值:{numRef.current}
      
这一次的值:{count}
      setCount(count + 10)}>+10
    
  )
}

当我们点击加的时候，会发现numRef.current永远比count少一次加

因为我们这样写useEffect会记录每一个的值,第一次加的时候，刚刚才赋值给useEffect的useRef