useEffect 中的 clearInterval

在 React 中，useEffect 是处理副作用的常用方式之一，副作用包括但不限于数据获取、DOM 操作、计时器等。在使用 useEffect 实现计时器时，如果不使用 clearInterval，可能会导致计时器一直持续下去，消耗浏览器资源。因此，使用 useEffect 实现计时器时，需要在组件卸载时清除计时器。这就是 useEffect 中的 clearInterval 的作用。

使用方法

在使用 useEffect 实现计时器时，需要按照以下步骤：

1. 在组件中定义计时器变量 intervalId 和状态变量 time：

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

function Counter() {
  const [time, setTime] = useState(0);
  let intervalId;

  return (
    <div>
      <p>{time} seconds have elapsed.</p>
    </div>
  );
}

2. 在 useEffect 中使用 setInterval 创建计时器，并在每次计时器触发时更新 time 状态：

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

function Counter() {
  const [time, setTime] = useState(0);
  let intervalId;

  useEffect(() => {
    intervalId = setInterval(() => {
      setTime(time => time + 1);
    }, 1000);

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

  return (
    <div>
      <p>{time} seconds have elapsed.</p>
    </div>
  );
}

3. 在计时器清除函数中使用 clearInterval(intervalId) 清除计时器。

return () => {
  clearInterval(intervalId);
};

完整代码

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

function Counter() {
  const [time, setTime] = useState(0);
  let intervalId;

  useEffect(() => {
    intervalId = setInterval(() => {
      setTime(time => time + 1);
    }, 1000);

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

  return (
    <div>
      <p>{time} seconds have elapsed.</p>
    </div>
  );
}

以上就是在 useEffect 中使用 clearInterval 来清除计时器的方法。使用 clearInterval 可以有效节约浏览器资源，避免计时器一直持续下去。