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

了解React钩子(续集)的闭合陷阱

时间:2023-03-08 14:00:39 网络应用技术

  在上一篇文章中,我们知道钩闭合陷阱是什么。它的原因和解决方案,并通过案件进行示范。

  实际上,该案的闭合陷阱的解决方案并不完美。让我们改进本文。

  首先,让我们回顾一下关闭陷阱是什么:

  钩子的闭合陷阱是指钩子(例如使用效率)中的某个状态,但并未将其添加到DEPS数组中,这会导致状态更改,但是执行函数仍然引用了先前的状态。

  它的解决方案是正确设置DEPS数组,将使用状态放在DEPS数组中,以便每次状态更改时都可以执行最新功能,并且可以引用新状态。在同一时间,最后一个计时器,事件监视器等应清洁。

  我们举了这样一个例子:

  每个打印是0:

  解决方案是将计数设置为deps并添加清洁功能:

  这可以解决闭合陷阱:

  但是,这种解决闭合陷阱的方法不适合计时器。

  为什么?

  因为每次计数发生变化时,计时器将被重置,并且重新计算之前的时间,这将导致时间不准确。

  因此,将状态添加到deps的方式是解决闭合陷阱,但计时器不能这样做。

  那么还有什么可以解决闭合陷阱?

  useref。

  闭合陷阱的原因是在使用效果的功能中引用了某个状态,该状态形成闭合。

  USEREF是记忆的链接列表中的对象,当前保存值。

  这是源代码:

  在初始化期间,在记忆的state上创建了一个对象,并且该对象始终返回。

  通过这种方式,通过USERF保存回调函数,然后从useeeefect中的ref.current从ref.current收集函数,然后避免直接调用。关闭陷阱没有问题。

  就是这样:

  计时器在使用效率中执行,并且将DEPS设置为[],因此仅执行一次。回调函数使用Ref.Current。没有直接取决于状态,因此不会有封闭陷阱。

  使用Userf创建一个ref对象。初始值是打印计数的回调函数。每个渲染都会修改新创建的函数的功能。此功能的计数是最新的。

  在这里,uselayouteffect而不是使用效率是因为在渲染前同时执行了UselayOuteffect。呈现后,使用USENFECT对使用不同步,因此USELAYOUTEFFECT可以确保在使用使用效率之前调用它。

  此方法避免了对使用效率状态的直接引用,从而避免了封闭问题。

  此外,在修改计数的地方,您可以使用setCount(count => count + 1)而不是setCount(count + 1),以避免关闭问题:

  组件的代码是这样的:

  测试:

  确实,打印也是正常的。这是解决闭合陷阱的第二种方法。它用于避免通过USEREF直接引用状态,从而避免结束问题。

  该逻辑使用多个钩子,可以将其包装到自定义钩中:

  然后可以简化组件代码:

  通过这种方式,我们解决了以Userf方式关闭陷阱的问题。

  在上一篇文章中,我们可以每次通过将因状态添加到DEPS数组中执行新功能,并引用新语句来解决关闭陷阱的问题。

  此方法不适合使用计时器,因为一旦计时器重置并重新计算,时间就不准确。

  这就是为什么我们使用第二种方法避免关闭陷阱:使用USERF。

  USEREF可以解决封闭陷阱的原因是,状态不是在钩子(例如Useeeefect)中直接引用的,而是引用了参考文献。这是修改参考文献中的值后的最新一个。

  然后,我们将此逻辑封装到自定义钩中,可以方便地重复使用。

  有两种方法可以解决钩子的闭合陷阱:

  在处理计时器时,为了确保计时器的准确性,最好使用userf方法。其余可以使用。