reactjs文档提到useEffect挂钩中的延迟事件，这是什么意思？

Question

我正在阅读有关reactjs doc钩子的useEffect，他们提到了：

传递给useEffect的函数在布局和绘制后在延迟事件中触发。

您能解释一下什么是延迟事件吗？它是DOM核心的一部分还是什么？

谢谢...

Answer 1

要使用特定的反应用例来回答问题：您想指示您的Progressive Web App是可安装的，并提供自定义的应用程序内安装流程：

• 收听beforeinstallprompt事件。
• 保存beforeinstallprompt事件，以便以后可以用来触发安装流程。
• 警告用户您的PWA是可安装的，并提供按钮或其他元素来启动应用程序内安装流程。

推迟了：您可能需要等待，然后向用户显示安装提示，这样他们才不会从他们的工作中分心。例如，如果用户在结帐流程中或正在创建他的帐户，我们让他们在提示之前完成该操作他们。

所以是延迟事件的迷你示例

 let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => { 
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can install the PWA
  showInstallPromotion();
});

我们提供一个用户元素，使用用户使用不同的变量单击的UI元素

buttonInstall.addEventListener('click', (e) => {
  // Hide the app provided install promotion
  hideMyInstallPromotion();
  // Show the install prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  deferredPrompt.userChoice.then((choiceResult) => {
    if (choiceResult.outcome === 'accepted') {
      console.log('User accepted the install prompt');
    } else {
      console.log('User dismissed the install prompt');
    }
  })
});

希望这可以稍微消除雾气。

Answer 2

简而言之>>

让您感到困惑的[during a deferred event]仅意味着：传递给useEffect挂钩的函数不会立即运行，而是在以后会触发的事件中运行（精确地绘制之后）

详细

幕后反应可与称为Fiber的算法一起使用。简而言之，这改善了React对异步任务和优先级的处理。

由useEffect

创建的效果在内部称为被动效果。基于它们在功能组件中的定义顺序的被动效果使用下一方法彼此链接，并计划在每次绘制（不渲染）之后运行。

// This commit included a passive effect. These do not need to fire until
// after the next paint. Schedule an callback to fire them in an async
// event. To ensure serial execution, the callback will be flushed early if
// we enter rootWithPendingPassiveEffects commit phase before then.

You can checkout the implementation if you are interested.