Svelte JS：在另一個方法中實現 onDestroy 的目的是什么

Question

我正在學習 Svelte JS。 在這個REPL中，想知道在組件Tabs的定義中添加onDestroy方法的目的是什么。 我知道這是管理組件被銷毀時發生的事情的方法，但我從未見過它在另一個方法中定義。

tab => {
        tabs.push(tab);
        selectedTab.update(current => current || tab);

        onDestroy(() => {
            const i = tabs.indexOf(tab);
            tabs.splice(i, 1);
            selectedTab.update(current => current === tab ? (tabs[i] || tabs[tabs.length - 1]) : current);
        });
    },

Answer 1

像onDestroy這樣的生命周期函數有一個簡單的規則：它們必須在組件初始化期間調用，即它們必須在組件的<script>標簽中同步調用。

<script>
  import { onDestroy } from 'svelte'

  onDestroy(..) // ok

  {
    onDestroy(..) // ok
  }

  (() => {
    onDestroy(..) // ok
  })()

  const fn = callback => {
    onDestroy(callback)
  }

  fn() // ok

  setTimeout(() => {
    onDestroy(..) // NOT OK !!!
    fn() // NOT OK
  })
</script>

重要的是調用的時間，而不是它在代碼中的位置。 生命周期回調將附加到當前正在初始化的組件，無論調用來自何處。

如果需要，您可以將onDestroy放入 function 中，這僅意味着此 function 的用戶必須在組件初始化期間調用它，並且該回調將在該組件被銷毀時運行。

在您鏈接的示例中，上下文用作包含onDestroy的 function 的傳輸。 上下文也必須在組件的初始化階段同步解決，所以我們很好。 組件從上下文中獲取 function，它立即調用它，並且 function 可以在組件不知道的情況下對組件進行一些清理。 這是很好的封裝。

Answer 2

調用onDestroy會添加一個回調，該回調將在 svelte 組件被銷毀時調用。 您可以根據需要添加任意數量的回調，並隨時調用該方法。

在這里，開發人員似乎希望針對不同的上下文使用不同的清理例程。