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

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

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

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

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

遞歸的中止這還不簡(jiǎn)單，在方法中添加一個(gè)中止條件不就好了。

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)}>點(diǎn)擊</Button>
      {
        flag && <Children></Children>
      }
    </div>
  );
};

結(jié)果與預(yù)期好像不太一樣，突然仔細(xì)想一下，當(dāng)組件卸載時(shí)，所有與該組件相關(guān)的狀態(tài)（通過(guò)useState定義的狀態(tài)）都會(huì)被清除，這怎么可能會(huì)有效呢！

簡(jiǎn)單閉包處理

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

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

我們?cè)趻燧d結(jié)束后創(chuàng)建一個(gè)單一實(shí)例用來(lái)控制遞歸方法，并在卸載的時(shí)候?qū)⑦f歸的狀態(tài)改為false即可。如果需要在組件的其他位置使用，還是使用useRef對(duì)實(shí)例進(jìn)行包裹比較好。

  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)}>點(diǎn)擊</Button>
      {
        flag && <Children></Children>
      }
    </div>
  );
};