详解React组件卸载怎么中止递归方法

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>
  );
};

  const controller = () => {
    // 递归的状态（开始/结束）
    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
    }
  }

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

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>
  );
};