反应 setTimeout 和 clearTimeout

Question

最近我正在使用 React 创建一个网站，我发现我使用了很多 'setTimeOut()' 并且我知道从 React 文档中有时你需要在组件卸载时清理一些东西（老实说，我是不完全了解这个清理的东西），显然最近我看到一个帖子说'setTimeOut（）'也需要清理但是我如何清理我在'useEffect（）'中调用的函数，我正在使用' function 内部的 setTimeOut()'？

这是我的代码：

  useEffect(() => {
    createContent();
    handleMobileContainerView();
  });


  const createContent = () => {
    if (contentCompShowStatus) {
      for (let key in btnStatus) {
        if (btnStatus.hasOwnProperty(key)) {
          if (btnStatus[key] === true) {
            if (key === 'aboutBtn') {
               delayContent('about-contents');
            } else if (key === 'skillsBtn') {
               delayContent('skills-contents');
            } else if (key === 'projectsBtn') {
               delayContent('projects-contents');
            }
          }
        }
      }
    }
  };


  const delayContent = (content) => {
    if (firstTime) {
      setTimeout(() => {
        setCurrentContent(content);
        setFirstTime(false);
      }, 200);
    } else if (!firstTime) {
      setTimeout(() => {
        setCurrentContent(content);
      }, 450);
    }
  };

正如您在上面的代码中看到的，“createContent()”在“useEffect()”中，并且正在调用使用“setTimeout()”的 function 名称“delayContent()”。

我需要清理这种情况吗？

我该如何清理这种情况？ （function 内部的函数使用 'setTimeOut()' 并在 'useEffect()' 中调用）

Answer 1

您可以使用 useEffect 返回一个 function，它应该可以清理 setTimouts 和 setIntervals。 例如，

useEffect(() => {
  const timer = setTimeout(someFunc, 100);
  return () => clearTimeout(timer);
});

要清除 setTimouts，请对 setInterval 使用 clearTimeout 和 clearInterval。 文档

就您的代码而言，

  useEffect(() => {
    const timers = createContent();
    handleMobileContainerView();
    return () => timers.forEach(timer => window.clearTimeout(timer));
  });

  const createContent = () => {
    let timers = [];
    if (contentCompShowStatus) {
      for (let key in btnStatus) {
        if (btnStatus.hasOwnProperty(key)) {
          if (btnStatus[key] === true) {
            if (key === 'aboutBtn') {
               timers.push(delayContent('about-contents'));
            } else if (key === 'skillsBtn') {
               timers.push(delayContent('skills-contents'));
            } else if (key === 'projectsBtn') {
               timers.push(delayContent('projects-contents'));
            }
          }
        }
      }
    }
    return timers;
  };


  const delayContent = (content) => {
    let timer;
    if (firstTime) {
      timer = setTimeout(() => {
        setCurrentContent(content);
        setFirstTime(false);
      }, 200);
    } else if (!firstTime) {
      timer = setTimeout(() => {
        setCurrentContent(content);
      }, 450);
    }
    return timer;
  };

Answer 2

您可以在创建 timeOut 时返回timerId 。 在unmount时，您可以使用 useEffect 的return function进行useEffect 。

卸载：

  useEffect(() => {
    const timerId = createContent();
    handleMobileContainerView();
    return () => {
      clearTimeout(timerId);
    };
  }, []);

返回 TimerId：

  const delayContent = (content) => {
    let timerId;
    if (firstTime) {
      timerId = setTimeout(() => {
        setCurrentContent(content);
        setFirstTime(false);
      }, 200);
    } else if (!firstTime) {
      timerId = setTimeout(() => {
        setCurrentContent(content);
      }, 450);
    }
    return timerId;
  };

// 所有代码：

function A() {
  useEffect(() => {
    const timerId = createContent();
    handleMobileContainerView();
    return () => {
      clearTimeout(timerId);
    };
  }, []);
  const createContent = () => {
    if (contentCompShowStatus) {
      for (let key in btnStatus) {
        if (btnStatus.hasOwnProperty(key)) {
          if (btnStatus[key] === true) {
            if (key === "aboutBtn") {
              return delayContent("about-contents");
            } else if (key === "skillsBtn") {
              return delayContent("skills-contents");
            } else if (key === "projectsBtn") {
              return delayContent("projects-contents");
            }
          }
        }
      }
    }
  };

  const delayContent = (content) => {
    let timerId;
    if (firstTime) {
      timerId = setTimeout(() => {
        setCurrentContent(content);
        setFirstTime(false);
      }, 200);
    } else if (!firstTime) {
      timerId = setTimeout(() => {
        setCurrentContent(content);
      }, 450);
    }
    return timerId;
  };
}