使用.map呈现组件会在组件内重置setTimeout

基础概念

.map 是 JavaScript 中数组的一个方法，用于遍历数组并对每个元素执行指定的函数，返回一个新的数组。在 React 或其他前端框架中，.map 常用于渲染列表组件。

setTimeout 是 JavaScript 中的一个定时器函数，用于在指定的延迟时间后执行一段代码。

问题描述

在使用 .map 渲染组件时，如果在组件内部使用 setTimeout，可能会遇到定时器被重置的问题。这是因为每次组件重新渲染时，都会创建一个新的 setTimeout 实例，从而覆盖之前的定时器。

原因分析

组件重新渲染：当父组件的状态发生变化时，使用 .map 渲染的子组件会重新渲染。
定时器重置：每次重新渲染时，都会创建一个新的 setTimeout，导致之前的定时器被清除。

解决方案

方案一：使用 `useRef` 保存定时器 ID

useRef 是 React 提供的一个 Hook，用于保存可变的值，并且不会在组件重新渲染时丢失。

import React, { useRef } from 'react';

const MyComponent = ({ items }) => {
  const timersRef = useRef({});

  const startTimer = (itemId) => {
    if (timersRef.current[itemId]) {
      clearTimeout(timersRef.current[itemId]);
    }
    timersRef.current[itemId] = setTimeout(() => {
      console.log(`Timer for item ${itemId} finished`);
    }, 1000);
  };

  return (
    <div>
      {items.map((item) => (
        <div key={item.id} onClick={() => startTimer(item.id)}>
          {item.name}
        </div>
      ))}
    </div>
  );
};

export default MyComponent;

方案二：使用 `useEffect` 管理定时器生命周期

useEffect 可以用来处理副作用，并且在组件卸载时清除定时器。

import React, { useEffect } from 'react';

const MyComponent = ({ items }) => {
  useEffect(() => {
    const timers = {};

    const startTimer = (itemId) => {
      if (timers[itemId]) {
        clearTimeout(timers[itemId]);
      }
      timers[itemId] = setTimeout(() => {
        console.log(`Timer for item ${itemId} finished`);
      }, 1000);
    };

    items.forEach((item) => {
      startTimer(item.id);
    });

    return () => {
      Object.values(timers).forEach(clearTimeout);
    };
  }, [items]);

  return (
    <div>
      {items.map((item) => (
        <div key={item.id}>
          {item.name}
        </div>
      ))}
    </div>
  );
};

export default MyComponent;