React Hooks：React 组件中的 setInterval
React Hooks：React 组件中的 setInterval
本文将演示如何调用 设置间隔（） 只要您的组件显示在屏幕上或当用户单击按钮时，就会调用该方法。
我们将创建一个功能组件并使用钩子来演示它。
为什么我们使用 SetInterval
设置间隔 可以以预定的时间间隔运行函数。在 React 项目中，它通常对定期请求数据或测试条件等事情非常有帮助。
这 设置间隔（） 方法返回 间隔ID 你可以存储 间隔Id 进入状态值。
SetInterval 的简单示例
让我们在功能性 React 组件中使用 setInterval。我们正在使用 设置间隔（） 方法入 使用效果（） 方法。
useEffect(() => { const interval = setInterval(() => { console.log('这将每1秒调用一次'); }, 1000); }, []);
上面的代码是打印这句话： ** “这将每 1 秒调用一次”** 每秒到控制台，直到它被清除。
在 使用效果 钩子，上面的代码安排了一个新的时间间隔，每秒执行一次。 React 组件将在其初始安装后安排此操作。通过从 使用效果 挂钩并提供间隔作为参数，间隔被正确清除。
如何清除间隔
绑定到时间间隔的函数或代码块一直执行到停止为止。要停止间隔，您可以使用 清除间隔（） 方法。
useEffect(() => { const interval = setInterval(() => { console.log('这将每 1 秒调用一次'); }, 1000); return () => clearInterval(interval); }, [ ]);
计划的时间间隔在 useEffect 函数返回的 clearInterval 方法中给出。结果，组件从 DOM 卸载后，间隔被正确清除，不再每秒触发一次。
setInterval() 按钮点击
您必须将 设置间隔（） 如果需要，在按钮的 onClick 事件处理程序属性中调用方法 设置间隔（） 当用户单击按钮时运行的方法。
handleClick = () => { const newIntervalId = setInterval(() => { console.log("test..."); }); }, 1000); }
React 中 setInterval 的副作用
您可以创建运行到您的应用程序中的 setInterval 数量。这可能会严重减慢您的应用程序和内存泄漏。
最初发表于 https://www.js-tutorials.com 2022 年 8 月 31 日。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
