React 的useEffect中使用闭包中的方法，获取不到最新的外部变量值

Question

我在useEffect中监听依赖，然后去执行闭包中的方法，但在在方法中获取到的闭包外部变量值始终是初始值。但是如果不在useEffect中代用闭包方法，外部变量的值就是共享的。什么原因呢？

// 自定义的闭包
const addTestFunc = () => {
  let lineCounter = 0;
  const mouseDown = () => {
    console.log('my', lineCounter);
    lineCounter++;
  };
  const getCounter = () => {
    return lineCounter;
  };
  const cancelPolyToLine = (points: Array<any>) => {
    console.log('ldddd', lineCounter);
    lineCounter = points.length;
  };
  return { mouseDown, cancelPolyToLine, lineCounter, getCounter };
};

// 在useEffect中使用
  const addTest = addTestFunc();
  const [countLi, setCountLi] = useState(0);
  useEffect(() => {
    if (countLi > 0) {
      // 此处调用的，lineCount一直为0
      console.log('effect', addTest.getCounter());
      addTest.cancelPolyToLine([1]);
    }
  }, [countLi]);
  const changeCounter = () => {
    // 此处调用的，lineCounter会变化
    console.log(addTest.getCounter());
    addTest.cancelPolyToLine([8, 7, 6]);
    addTest.mouseDown();
  };
return (
    <>
    <Button onClick={changeCounter}>改变counter</Button>
    <Button onClick={() => setCountLi(countLi + 1)}>改变2</Button>
</>
)

Answer 1

我使用了useMemo来控制这个闭包不跟随其他变量的变化也重新赋值，并结合useImperativeHandle让其父组件可以调用闭包里的方法

const addTest = useMemo(() => {
    return addTestFunc();
  }, []);
  // const addTest = addTestFunc();

  useImperativeHandle(ref, () => ({
    cancelLine: cancelPoly
  }));

  const cancelPoly = (points: Array<any>) => {
    addTest.cancelPolyToLine(points);
  };

虽然解决了当前的问题，但是我依然觉得如果能在本组件内使用方法最好，就避免使用useImperativeHandle来转发一次。有更好的解决方案的小伙伴，欢迎留言