React 中 useEffect 中的清理使用需要还是不需要？答案

【问题标题】：Cleanup usage in useEffect in React need or not need?React 中 useEffect 中的清理使用需要还是不需要？
【发布时间】：2022-01-06 23:46:36
【问题描述】：

在useEffect 钩子的以下用法中，我正在检测窗口宽度，然后如果窗口是某个宽度，则函数会设置状态，但在这种情况下我需要清理useEffect 还是会它不需要清理吗？我知道在 API 的上下文中，您可以在返回时取消订阅 API，因此当组件卸载时返回将运行

再次设置windowWidth是正确的还是完全删除useEffect钩子的返回更好？

const [windowWidth, setWindowWidth] = React.useState<number>(0);
const [column, setColumn] = React.useState<number>(10);

const calcWindow = React.useCallback(() => {
  if (windowWidth < 768) {
    setColumn(() => 5);
  } else {
    setColumn(() => 10);
  }
}, [windowWidth]);

React.useEffect(() => {
  setWindowWidth(window.innerWidth);
  calcWindow();
  return () => {
    setWindowWidth(window.innerWidth); // is this needed or is this correct?
  };
}, [calcWindow, windowWidth]);

【问题讨论】：

卸载时设置组件状态有什么意义？
换句话说不需要它

标签： javascript reactjs typescript

【解决方案1】：

这里返回的函数是不必要的。当组件大约要卸载，您不应该设置状态，因为该状态即将消失。在重新渲染期间，清理函数将运行并设置窗口宽度，但该值将立即从setWindowWidth(window.innerWidth); 调用中被覆盖。

【讨论】：