时间戳

首页 > 解决方案 > 实现可重用的生命周期行为

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

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

标签： svelte

解决方案

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

推荐阅读