Question

我正在尝试在精简的组件中实现可重用的生命周期行为。这个想法是实现一个模块，以在组件的生命周期方法出现时执行某些操作。然后可以轻松地将此模块导入苗条的组件中。我考虑了以下问题：

想象一下我有几个组件，并且我想在发生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只是函数-您可以在任何地方调用它们，而无需传递它们。唯一的要求是在组件初始化时调用它们，以便它们“链接”到组件。

这意味着您可以创建这样的辅助函数...

// 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>

请注意，如果您从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

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

1 个答案: