詳解React組件卸載怎么中止遞歸方法

更新時間：2024年01月29日 08:40:43 作者：TA_WORDL

最近在處理項目代碼的時候,出現(xiàn)了一個bug,組件中的方法在組件卸載后仍然在執(zhí)行,代碼片段發(fā)給我看,但是變量的用意我也不懂,只看到有方法調用自身方法,這不就是遞歸嘛,所以本文詳細給大家介紹了React組件卸載怎么中止遞歸方法,需要的朋友可以參考下

問題的出現(xiàn)——組件卸載怎么中止遞歸方法

朋友在處理彈幕相關業(yè)務的時候，出現(xiàn)了一個bug：組件中的方法在組件卸載后仍然在執(zhí)行。代碼片段發(fā)給我看，但是變量的用意我也不懂，只看到有方法調用自身方法，這不就是遞歸嘛（最后發(fā)現(xiàn)是定時器沒有清除的問題）??。

遞歸的中止這還不簡單，在方法中添加一個中止條件不就好了。

const Children = () => {
  const [isStop, setStop] = useState(false)
  
  // 遞歸
  const recursion = async (num: number) => {
    if (isStop) return
    console.log(num)
    await sleep(1000)
    recursion(num + 1)
  }
  
  useEffect(() => {
    recursion(1)
    return () => {
      setStop(（） => true)
    }
  }, [])
  
  return (
    <div>Children</div>
  )
}

const HomePage: React.FC = () => {
  const [flag, setFlag] = useState(false)
  return (
    <div>
      <Button onClick={() => setFlag(!flag)}>點擊</Button>
      {
        flag && <Children></Children>
      }
    </div>
  );
};

結果與預期好像不太一樣，突然仔細想一下，當組件卸載時，所有與該組件相關的狀態(tài)（通過useState定義的狀態(tài)）都會被清除，這怎么可能會有效呢！

簡單閉包處理

既然狀態(tài)在組件卸載的時候被清理了，那么在遞歸內部增加狀態(tài)來控制遞歸不就行了。閉包就很適合現(xiàn)在的場景。

  const controller = () => {
    // 遞歸的狀態(tài)（開始/結束）
    let state = false
    // 遞歸方法
    const recursion = async (num: number) => {
      // 結束條件
      if (state === false) return
      console.log(num)
      await sleep(1000)
      recursion(num + 1)
    }
    return {
      // 開啟遞歸
      start: (num: number) => {
        state = true
        recursion(num)
      },
      // 結束遞歸
      close: () => state = false
    }
  }

我們在掛載結束后創(chuàng)建一個單一實例用來控制遞歸方法，并在卸載的時候將遞歸的狀態(tài)改為false即可。如果需要在組件的其他位置使用，還是使用useRef對實例進行包裹比較好。

  useEffect(() => {
    let c = controller()
    c.start(1)
    return () => {
      c.close()
    }
  }, [])

Hook useRef處理

const Children = () => {
  const isUnmounted = useRef(false);
  
  // 遞歸
  const recursion = async (num: number) => {
    if (isUnmounted.current) return
    console.log(num)
    await sleep(1000)
    recursion(num + 1)
  }
  
  useEffect(() => {
    recursion(1)
    return () => {
      isUnmounted.current = true
    }
  }, [])
  
  return (
    <div>Children</div>
  )
}

const HomePage: React.FC = () => {
  const [flag, setFlag] = useState(false)
  return (
    <div>
      <Button onClick={() => setFlag(!flag)}>點擊</Button>
      {
        flag && <Children></Children>
      }
    </div>
  );
};