reactjs 这是react的useEffectEvent的精确polyfill吗？

0x6upsns 于 2023-05-28 发布在 React

关注(0)|答案(1)|浏览(243)

bounty还有7天到期。此问题的答案有资格获得+50声望奖励。dipea希望引起更多关注这个问题。

这是react即将推出的useEffectEvent钩子的精确polyfill吗？是否存在任何潜在问题？
我不确定的一点是，在返回的函数被用于任何其他效果之前，是否保证ref已经被更新。我认为只要在代码中的其他地方不使用相当深奥的useInsertionEffect，我在这方面就没问题，但我想确认一下。

function useEffectEvent(callback) {
  const fnRef = useRef(null)
  useInsertionEffect(() => {
    fnRef.current = callback
  }) 
  return (...args) => {
    return fnRef.current.apply(null, args)
  }
}

reactjs

来源：https://stackoverflow.com/questions/76335194/is-this-an-accurate-polyfill-of-reacts-useeffectevent

1条答案

按热度按时间

xmjla07d1#

阅读current documentation，您可以将您的方法与另一个polyfill that uses the useEffectEvent principle进行比较：它与您提供的原始polyfill非常相似，唯一的区别是将回调函数立即分配给ref：

const useEffectEvent = (callback) => {
  const ref = useRef(callback);

  ref.current = callback;

  return (...args) => {
    ref.current(...args);
  }
}

这个polyfill试图通过存储对回调函数的引用并返回调用最新版本回调的函数来模拟useEffectEvent的功能。
关于你的问题，是否保证ref在返回的函数被用于任何其他效果之前已经更新，ref应该在它被用于其他效果的时候更新，因为refs在效果运行之前的渲染阶段更新。
在这两个polyfill中，ref在调用返回的函数之前更新，确保使用最新版本的回调。
但是，在这两种情况下都需要考虑一些注意事项：

这两种解决方案都没有提供useEffectEvent的确切语义。它们不会自动“断开”效果的React性与不应是React性的代码之间的“链条”。
它们不会阻止回调从调用钩子的呈现中捕获值。这意味着，如果回调使用任何props或state，那么如果这些props或state在调用钩子和调用回调之间发生了变化，那么它可能会使用陈旧的值。
不建议在polyfill中使用useInsertionEffect，除非您正在使用CSS-in-JS库，并且需要一个地方来注入样式。根据React documentation，useInsertionEffect在任何DOM变化之前触发，主要用于在任何DOM更新发生之前注入样式。

因此，这些polyfill并不完美，不能完全模仿即将到来的useEffectEvent钩子的行为。

赞(0）回复(0）举报 2023-05-28

我来回答

reactjs 这是react的useEffectEvent的精确polyfill吗？

1条答案

相关问题

热门标签

最新问答