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

问题的出现------组件卸载怎么中止递归方法

朋友在处理弹幕相关业务的时候,出现了一个bug:组件中的方法在组件卸载后仍然在执行。代码片段发给我看,但是变量的用意我也不懂,只看到有方法调用自身方法,这不就是递归嘛(最后发现是定时器没有清除的问题)🥲。

递归的中止这还不简单,在方法中添加一个中止条件不就好了。

tsx 复制代码
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>
  );
};

结果与预期好像不太一样,突然仔细想一下,当组件卸载时,所有与该组件相关的状态(通过useState定义的状态)都会被清除,这怎么可能会有效呢!

简单闭包处理

既然状态在组件卸载的时候被清理了,那么在递归内部增加状态来控制递归不就行了。闭包就很适合现在的场景。

tsx 复制代码
  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
    }
  }

我们在挂载结束后创建一个单一实例用来控制递归方法,并在卸载的时候将递归的状态改为false即可。如果需要在组件的其他位置使用,还是使用useRef对实例进行包裹比较好。

tsx 复制代码
  useEffect(() => {
    let c = controller()
    c.start(1)
    return () => {
      c.close()
    }
  }, [])

Hook useRef处理

tsx 复制代码
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>
  );
};

来自CHAT-GPT


这是因为useRef创建的引用对象是在组件的闭包中存在的,而不是作为组件的状态存在。所以即使组件卸载,引用对象仍然可以被访问和修改。

个人理解,useRef创建的引用对象在递归方法中被引用,类似闭包的原理,所以在组件卸载的时候没有被清理。(如果理解错误,欢迎指正,轻点喷🫠)

用途

大家都是大佬,谁写递归没有中止条件呀 ,对吧😎。

我觉得在页面请求完数据之后,需要对数据进行复杂递归处理的时候,又把页面关闭,这种情况可能需要。

还有其他情况吗?欢迎大家补充哦!

相关推荐
行者..................4 小时前
手动编译 OpenCV 4.1.0 源码,生成 ARM64 动态库 (.so),然后在 Petalinux 中打包使用。
前端·webpack·node.js
小爱同学_4 小时前
一次面试让我重新认识了 Cursor
前端·面试·程序员
golang学习记4 小时前
AI 乱写代码?不是模型不行,而是你的 VS Code 缺了 Context!MCP 才是破局关键
前端
星光不问赶路人4 小时前
Vite 中的 import.meta.glob vs 动态导入:该用哪个?
前端·vite
z_y_j2299704385 小时前
服务器中使用Docker部署前端项目
服务器·前端·docker·容器
迪丽热爱5 小时前
解决【npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚本。】问题
前端·npm·node.js
数字冰雹5 小时前
图观 流渲染场景服务器
服务器·前端·数据库·数据可视化
李明卫杭州5 小时前
详细讲解js中的ResizeObserver
前端·javascript
千叶寻-6 小时前
package.json详解
前端·vue.js·react.js·webpack·前端框架·node.js·json
zz-zjx6 小时前
Web接入层的“铁三角”---防盗链、反向代理,负载均衡(nginx)
前端·nginx·负载均衡