react 定时器中修改usestate 不进行重新渲染组件

如果你希望在 React 定时器中修改 useState 而不重新渲染组件，你可以使用 useEffect 钩子函数。在 useEffect 中，你可以设置一个空的依赖项数组，这样 useEffect 只会在组件挂载时运行一次，而不会在 useState 改变时重新运行。在 useEffect 中，你可以使用 useState 中的值来更新一个普通的 JavaScript 变量，然后在定时器函数中修改该变量的值。这样，useState 的值就不会改变，也不会重新渲染组件。下面是一个示例：

import React, { useState, useEffect } from "react";

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    let interval = setInterval(() => {
      // 在这里修改普通 JavaScript 变量，而不是 useState 的值
      let newCount = count + 1;
      console.log("New count:", newCount);
    }, 1000);

    // 在组件卸载时清除定时器
    return () => clearInterval(interval);
  }, []);

  return <div>{count}</div>;
}

export default App;

在这个示例中，我们使用了 useEffect 钩子函数来创建一个定时器，该定时器每秒钟增加一个普通 JavaScript 变量 newCount 的值。我们没有直接使用 setCount 函数来更改 count 的值，因为这会触发组件的重新渲染。在 useEffect 的依赖项数组中传入一个空数组，以确保 useEffect 只运行一次。在 return 语句中，我们清除定时器，以防止内存泄漏。