当我在一个空的 useEffect 中引用时，react 中计数器的植入值为 0

Question

我根据 this page 提取了代码并进行了调整。我想计算用户在组件上的毫秒数，所以我想在组件卸载时记录计数器值，也就是 useffect/componentWillUnmount() 的 return 语句。

    const [milliseconds, setMilliseconds] = useState(0);
    const isActive = useState(true);

    const logger = new logger(stuff);
  

    useEffect(() => {
        initializeIcons(undefined, { disableWarnings: true });
    });

    useEffect(() => {
        return () => {
            console.log("empty useffect milliseconds:", milliseconds);            
            logger(milliseconds);
            clearInterval(milliseconds)
        };
    }, []);

    useEffect(() => {
        let interval: NodeJS.Timeout =  setInterval(() => {
        }, 0);

        
        interval = setInterval(() => {
            setMilliseconds(milliseconds => milliseconds + 1000);
        }, 1000);
        console.log("interval:", interval);
        console.log("interval milliseconds:", milliseconds);
       
    }, [ milliseconds]);

我在“interval milliseconds”控制台语句中看到毫秒打印输出正常，但“empty useffect milliseconds:”总是打印出 0。我做错了什么？

Answer 1

你可以记住一个挂载时间戳，然后计算差值。

useEffect(() => {
  const mountedAt = Date.now();

  return () => {
    const mountedMilliseconds = Date.now() - mountedAt;
    console.log(mountedMilliseconds);
  };
}, []);

旁注 1： 如果您希望运行仅在挂载时使用空数组作为 deps。如果您没有通过 [] 个 deps，您的 initializeIcons 效果将运行每个 re-render。这样做：

useEffect(() => {
  initializeIcons(undefined, { disableWarnings: true });
}, []);

旁注 2： 您创建的第一个间隔会造成内存泄漏，因为它什么都不做，也永远不会被清除。

您遇到的另一个问题是 milliseconds useEffect 中的依赖项，它会在每次 milliseconds 状态更改后注册新的间隔。

当我在一个空的 useEffect 中引用时，react 中计数器的植入值为 0

Implantation of counter in react has a value of 0 when I reference in an empty useEffect

reactjs

react-hooks