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 添加一个回调，当 svelte 组件被销毁时将被调用。您可以根据需要添加任意数量的回调，并在需要时调用该方法。

在这里，开发人员似乎想要针对不同的上下文使用不同的清理例程。

Answer 2

像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 放在一个函数中，这意味着这个函数的用户必须在组件的初始化期间调用它，并且回调将运行当这个组件被销毁时。

在您链接的示例中，上下文用作包含 onDestroy 的函数的传输。上下文也必须在组件的初始化阶段同步解析，所以我们很好。组件从上下文中获取函数，立即调用它，并且该函数可以在组件不知情的情况下在组件上注册一些清理。很好的封装。

Svelte JS：另一个方法中的 onDestroy 实现的目的是什么

Svelte JS: what is the purpose of the onDestroy implementation inside another method

javascript

components

svelte

ondestroy