Svelte JS: какова цель реализации onDestroy внутри другого метода

Question

Я изучаю Svelte JS. В этом REPL и интересно узнать, какова цель onDestroy метода, добавленного в определение компонента Tabs. Я понимаю, что это способ управлять тем, что происходит, когда компонент уничтожается, но я никогда не видел, чтобы он определялся внутри другого метода.

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 в функцию, если хотите, это просто означает, что пользователь этой функции должен будет вызовите его во время инициализации компонента, и обратный вызов будет запущен, когда этот компонент будет уничтожен.

В примере, который вы связали, контекст используется как транспорт для функции который содержит onDestroy. Контекст также должен быть разрешен синхронно во время фазы инициализации компонента, так что все в порядке. Компонент получает функцию из контекста, вызывает ее немедленно, и функция может зарегистрировать некоторую очистку компонента без ведома компонента. Хорошая инкапсуляция.

Answer 2

Вызов onDestroy добавляет обратный вызов, который будет вызываться при уничтожении компонента svelte. Вы можете добавить столько обратных вызовов, сколько захотите, и вызывать метод, когда захотите.

Здесь похоже, что разработчику нужны разные процедуры очистки для разных контекстов.