React：清理函数多久运行一次？

具有状态变量的 React 组件在这些变量更新时会触发重新渲染。这是预期的，也是 React 的核心功能之一。此外，组件还提供清理功能，每次“卸载”组件时都会触发该功能。但这个清理功能实际运行的频率是多少？

嗯，正如我们将在本演示中探索的那样，清理函数可以有多个触发器，但一个常见的触发器是当状态变量链接到副作用时更新状态变量。

简而言之，如果您的 React 组件正在使用 useEffect 并遵循特定的状态变量，让我们看以下示例：

useEffect(() => {
  console.log("Page mounted");

  return () => {
    // cleanup function
    console.log("Page unmounted");
  };
}, [counter]);

每次更新计数器时都会调用清理函数。

当状态变量更新时，React 会重新渲染组件，这意味着它首先需要“删除”它，然后再次“渲染”它。虽然虚拟 DOM 优化了哪些节点需要更新，但在逻辑层面，清理函数仍然会被调用。

在大多数情况下，这是可以接受的。但是，如果您的清理函数正在执行报告事件、删除侦听器等操作，请确保这是有意为之，因为清理函数将根据状态变量被多次调用。

演示

让我们看一下演示。

• 在开发者工具中，打开控制台。
• 你会注意到两个日志：

Child mounted
Page mounted

这意味着页面和子组件这两个组件都已渲染。

• 如果您还记得上面分享的代码片段，useEffect 与 counter 绑定在一起，当单击第一个按钮时，counter 会递增。现在，它应该显示：递增 0。让我们继续单击它。

• 密切关注控制台并注意如何添加四个日志：
  

Child unmounted
Page unmounted
Child mounted
Page mounted

状态变量 counter 已更新，并且由于有两个 useEffect 挂钩与 counter 绑定，这意味着它们的清理函数已执行。请注意，对于 Page 组件，useEffect 与状态变量相关联，而对于 Child 组件，副作用与 prop 变量相关联，其中源仍然是相同的计数器状态变量。

此外，您还可以看到“Flag Off”按钮，它会更新另一个未链接到 useEffect 的状态变量。这意味着点击此按钮不会触发清理功能。

结论

清理函数在 React 中被大量使用，尤其是在组件“完成”后报告事情。但是，将 useEffect 绑定到状态变量时要小心。如演示中所示，这会导致每次更新状态变量时都会调用清理函数，这可能是意想不到的。

大多数时候，清理函数位于 useEffect 中，没有任何状态变量。

useEffect(() => {
  console.log("Page mounted");

  return () => {
    // cleanup function
    console.log("Page unmounted");
  };
}, [counter]);

一个组件中可以有多个 useEffect 钩子。在这种情况下，您可以有一个对状态变量做出反应，另一个用于设置清理函数。

Child mounted
Page mounted

为了回答这个问题，组件卸载时将调用清理函数。当用户导航到应用程序的另一个部分时，或者如果 useEffect 依赖于状态变量，那么每当该状态变量更新时，就会调用 N 次。

以上是React：清理函数多久运行一次？的详细内容。更多信息请关注PHP中文网其他相关文章！