react-hooks - 当我使用错误的方式编写 useDebounce 时，我也得到了正确的值？？有人知道为什么

Question

在此处输入图像描述

像这样的代码：

import React , { useEffect, useState, useMemo, useRef, useCallback } from 'react';
import './App.scss';


function debounce(fn, ms) {
  let timer;
  return function(...args) {
   if (timer) {
     clearTimeout(timer)
   } 
   timer = setTimeout(() => {
     fn(...args)
   }, ms);
 }
}

function useDebounce(fn, time) {
  console.log('usedebounce')
  return debounce(fn, time);
}

const App = () => {
 const [counter1, setCounter1] = useState(0);
 const [counter2, setCounter2] = useState(0);

 const handleClick = useDebounce(function() {
  console.count('click1')
  setCounter1(counter1 +1);
 }, 500)

useEffect(function() {
   const t = setInterval(() => {
    setCounter2(x => x + 1)
  }, 500);
  return clearInterval.bind(undefined, t)
}, [])


return <div style={{ padding: 30 }}>
  <button
    onClick={function() {
      handleClick()
    }}
  >click</button>

  <div>{counter1}</div>
  <div>{counter2}</div>
</div>} 

(1) 当我运行此代码时，Counter1 得到一个正确的值（单击 ms 时间 => 值 +1 后）。为什么是正确的值？我的意思是值应该是 click => value +1 而不是 click ms time => value +1

(2) 当我使用 setCounter(x = > x+1) 替换 setCounter(counter1+1) 时。结果在 ms timer 之后，控制台单击了时间值。我很混乱

谁能告诉我原因？谢谢

标签： react-hooksuse-state