Реализация многоразового поведения жизненного цикла - PullRequest
Новая
       6

Реализация многоразового поведения жизненного цикла

0 голосов
/ 17 июня 2019

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

Сейчасэто правильный подход?Есть ли лучший способ добиться этого?Какие предостережения?

1 Ответ

1 голос
/ 17 июня 2019

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

...