在动态创建的函数组件中使用 useRef 钩子来避免陈旧的状态。

示例代码：

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

function MyComponent({ text }) {
  const [count, setCount] = useState(0);
  const intervalIdRef = useRef(null);

  useEffect(() => {
    intervalIdRef.current = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    return () => clearInterval(intervalIdRef.current);
  }, []);

  return (
    

      
{text}
      
Count: {count}
    
  );
}

function App() {
  const [showComponent, setShowComponent] = useState(false);

  function toggleComponent() {
    setShowComponent(prevShowComponent => !prevShowComponent);
  }

  return (
    

      Show/Hide Component
      {showComponent && }
    
  );
}

在上述代码中，使用 useRef 钩子创建了一个名为 intervalIdRef 的引用，在 MyComponent 组件中的 useEffect 钩子中更新计时器并始终使用引用的最新值。这将确保即使在组件重渲染期间，计时器也始终基于最新的 intervalIdRef 值进行清除和更新。