实现可重用的生命周期行为

Question

我正在尝试在精巧的组件中实现可重用的生命周期行为。这个想法是实现一个模块来在组件的生命周期方法发生时执行某些操作。然后可以轻松地将此模块导入到 svelte 组件中。我考虑了以下几点：

假设我有几个组件，我想在 onMount 和 onDestroy 发生时记录一些东西，所以我可以在每个组件中重复以下代码：

// Hello.svelte
<script>
import {onMount, onDestroy} from 'svelte';
onMount(()=>{
  console.log('Mounted!')
});
onDestroy(()=>{
  console.log('Destroyed!')
});

</script>
<h1>Hello World!<h1/>

但是，为了使它可以重用，我想在一个模块中隔离这种行为。我想出的方法如下：

//appendLogger.js
export default (onMount,onDestroy)=>{
  onMount(()=>{
  console.log('Mounted!')
});
  onDestroy(()=>{
    console.log('Destroyed!')
  });
};

在组件中我可以这样使用它：

//Hello.svelte
<script>
import {onMount, onDestroy} from 'svelte';
import appendLogger from '../appendLogger';
appendLogger(onMount,onDestroy);
</script>
<h1>Hello World!<h1/>

和

//Goodbye.svelte
<script>
//Hello.svelte
import {onMount, onDestroy} from 'svelte';
import appendLogger from '../appendLogger';
appendLogger(onMount,onDestroy);
</script>
<h1>Goodbye World!<h1/>

现在这个方法正确吗？有没有更好的方法来实现这一目标？注意事项是什么？

Answer 1

onMount 和 onDestroy 只是函数——你可以从任何地方调用它们，你不需要传递它们。唯一的要求是您在组件初始化时调用它们，以便它们对组件 'linked'。

这意味着您可以像这样创建一个辅助函数...

// log.js
import { onMount, onDestroy } from 'svelte';

export default function log() {
  onMount(() => {
    console.log('mounted');
  });

  onDestroy(() => {
    console.log('destroyed');
  });
});

...并像其他函数一样在您的组件中调用它：

<script>
  import log from './log.js';
  log();
</script>

请注意，如果您 return 来自 onMount 的函数，该函数将与 onDestroy 同时调用，因此您可以进一步简化它：

// log.js
import { onMount } from 'svelte';

export default function log() {
  onMount(() => {
    console.log('mounted');
    return () => console.log('destroyed');
  });
});

这是一个演示：https://svelte.dev/repl/e19cfcfcd3824f5d87aaae7673061021?version=3.5.1

实现可重用的生命周期行为

Implementing reusable lifecycle behavior

svelte