当前位置: 首页 > 网络应用技术

反应效应钩中的效果执行顺序

时间:2023-03-05 17:34:25 网络应用技术

  在检查官方文档时,我发现据说当组件被破坏时,使用效率返回的清除功能正在运行。一段时间后,在更新DOM渲染后执行清除功能。有了这个问题,进行了以下探索。

  反应原始文本:

  当组件被破坏时,清除功能会运行:

  为什么要返回函数?这是效果的可选清除机制。每个效果可以返回清除功能。这样,您可以将添加和删除订阅的逻辑放在一起。它们是效果的一部分。

  何时会被清除效果?反应会在那里。就像以前所学,每次渲染时都会执行效果。这就是为什么React在执行当前效果之前会清除先前的效果。

  DOM渲染更新后,清除功能将执行:

  它不需要特定的代码来处理更新逻辑,因为默认情况下使用使用效率。在调用新效果之前,它会在可能生成订阅并取消订阅操作呼叫序列的时间内列出以下内容:

  效果是什么(扩展),我们声明计数状态变量,并告诉React我们需要使用效果。在将函数传递给使用效果挂钩后,请立即使用效果。这是我们的效果。

  可以通过单击事件来单击事件值,通过路由跳跃来触发以下演示

  使用效率:

  此箭头功能是每个效果都可以返回清晰的功能。

  扩展完整的代码useseffect.jsx首先渲染,仅执行效果内容内容

  单击按钮触发状态更新。DOM更新渲染完成后,执行使用效果

  每次我们在这里重新租赁时,都会生成新的效果以替换上一个。

  第二次点击触发状态更新,这等同于第一次重复

  可以看出,当组件首次渲染时,它会执行效果内容。当组件更新后,将清除USEREFFECT以获得最后的效果,并且将执行清除功能以执行下一个效果。

  当组件被破坏时执行什么?

  单击路线跳跃以模拟组件的破坏

  当组件被破坏时,仅效果的清除功能返回

  第一次渲染时,执行效果内容。更新DOM后,先前效果返回和新EFFCT内容的功能。

  模块破坏

  原始:https://juejin.cn/post/7094882205185054