React Hooks与setInterval正确使用姿势，帮你避开setInterval大坑

前端

2024-01-10 18:58:29

前言

React Hooks是React 16.8版本中引入的全新特性，它允许我们使用状态和其它React特性而不必编写class组件。Hooks的使用极大地简化了React组件的开发，受到了广大开发者的欢迎。

然而，在使用Hooks时，一些开发者容易掉进一些坑，其中一个就是setInterval的使用。在本文中，我们将详细介绍如何在React Hooks中正确使用setInterval，帮助您避免掉入这个坑中。

setInterval在React Hooks中的常见用法

setInterval函数是一个JavaScript内置函数，用于每隔一段时间执行一次指定的函数。在React Hooks中，setInterval函数可以用来实现各种各样的效果，比如轮询数据、更新UI、或者执行动画等。

setInterval在React Hooks中的常见问题

在使用setInterval时，很容易掉入一个坑，那就是忘记清除计时器。当组件被卸载时，如果计时器没有被清除，那么它将继续运行，从而导致内存泄漏。

如何正确使用setInterval

为了避免掉入setInterval的坑，我们需要在组件被卸载时清除计时器。这可以通过两种方式来实现：

使用useEffect Hook
使用useRef Hook

使用useEffect Hook

useEffect Hook可以用来在组件的生命周期中执行副作用操作。副作用操作是指那些不直接改变组件状态的操作，比如发送网络请求、设置定时器、或者更新DOM等。

为了使用useEffect Hook来清除计时器，我们可以按照以下步骤进行：

在组件中声明一个变量来保存计时器ID。
在useEffect Hook中，将计时器ID作为第二个参数传入。
在useEffect Hook的回调函数中，使用clearInterval函数来清除计时器。

import { useEffect, useState } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timerId = setInterval(() => {
      setCount(count + 1);
    }, 1000);

    return () => {
      clearInterval(timerId);
    };
  }, []);

  return (
    <div>
      <h1>{count}</h1>
    </div>
  );
};

使用useRef Hook

useRef Hook可以用来创建和管理一个可变的引用值。这个引用值可以在组件的生命周期中保持不变。

为了使用useRef Hook来清除计时器，我们可以按照以下步骤进行：

在组件中声明一个变量来保存计时器ID。
在useRef Hook中，将计时器ID作为参数传入。
在组件的componentWillUnmount方法中，使用clearInterval函数来清除计时器。

import { useEffect, useRef } from 'react';

const MyComponent = () => {
  const count = useRef(0);
  const timerId = useRef(null);

  useEffect(() => {
    timerId.current = setInterval(() => {
      count.current++;
    }, 1000);

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

  return (
    <div>
      <h1>{count.current}</h1>
    </div>
  );
};