这是react的useEffectEvent的准确polyfill吗？-PHP中文网问答

微信公众号讲师中心

首页

文章

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端 JavaScript 后端开发数据库移动端运维开发 UI设计计算机基础 XML Web Services

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程

这是react的useEffectEvent的准确polyfill吗？

P粉251903163 2024-01-06 12:57:09

[React讨论组]

909

这是 React 即将推出的 useEffectEvent 钩子的准确填充吗？它是否存在任何潜在问题？

我不确定的一部分是，在返回的函数用于任何其他效果之前是否保证已更新引用。我想我在这方面没问题，只要我从不在代码中的其他任何地方使用相当深奥的 useInsertionEffect ，但我想确认一下。

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

P粉251903163

全部回复(1)

P粉1869047312024-01-07 10:10:29 1楼

我不认为 React 团队已经为 useEffectEvent 提出了官方的 polyfill（至少我还没有看到）。

话虽如此，您可以在针对现已失效的 useEvent 的 RFC，最初使用 useLayoutEffect。在将事件与效果分离的早期版本中，Dan Abramov 展示了更新的版本看起来像这样（在文档中不再可见）：

import { useRef, useInsertionEffect, useCallback } from 'react';

// The useEvent API has not yet been added to React,
// so this is a temporary shim to make this sandbox work.
// You're not expected to write code like this yourself.

export function useEvent(fn) {
  const ref = useRef(null);
  useInsertionEffect(() => {
    ref.current = fn;
  }, [fn]);
  return useCallback((...args) => {
    const f = ref.current;
    return f(...args);
  }, []);
}

这个polyfill使用useInsertionEffect。我相信这种选择的原因是插入效果是最先运行的（与 useLayoutEffect 和 useEffect 相比）。因此，可以非常安全地假设在任何其他效果运行之前更新了引用。

后来，useEvent 的 RFC 是搁置和useEffectEvent开始在文档中显示。尽管如此，由于公开的行为是相同的，因此可以重用相同的polyfill来实现useEffectEvent。

请注意，使用这个polyfill，钩子会返回一个稳定的函数（感谢useCallback(..., [])），这可能不是必需的，但更简单（以防万一）消费者错误地将返回的函数添加到效果的依赖项中）。

我想了解有关polyfill的更多信息，我已经在博客中介绍过它：查看新 React 文档中的 useEvent polyfill。