react-hooks为什么使用useRef可以保存上次的值？

Question

我在useEffect中把state状态赋值给ref对象的current属性，也就是说这个preCountUseRef.current拿到最新的state值，可是在DOM中显示上次的state值

相关代码

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

const App = () => {
  const [count, setCount] = useState(0)
  const preCountUseRef = useRef(count)

  useEffect(() => {
    preCountUseRef.current = count
  })

  return (
    <div>
      <p>precount: {preCountUseRef.current}</p>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(() => count + 1)}>Click me</button>
    </div>
  )
}

export default App

能否详细说明一下useRef运行机制以及对官网解释的"useRef就像是可以在其.current属性中保存一个可变值的“盒子”。"这句话该怎么理解呢？

Answer 1

跟闭包原理差不多

var add = (function() {  
  var counter =0;  
  return function() {counter +=1;returncounter}  
})();  
  
add();  
add();  
add();
// 3

Answer 2

ref 你理解成为是这个组件中的作用域链最顶层的变量就行了，也就是闭包。另外楼主的 useEffect 最好传一下第三个值，即使它是空的，否则在 setState 的时候会报错……