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 (
    <div>
      <h2> {numRef.current}</h2>
       {count}
      <button onClick={e=>setCount(count + 10)}>+10</button>
    </div>
  )
}

当我们点击加的时候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 (
    <div>
      <h2>上一次的值:{numRef.current}</h2>
      <h2>这一次的值:{count}</h2>
      <button onClick={e=>setCount(count + 10)}>+10</button>
    </div>
  )
}

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

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