Компоненты Svelte JS с или без OnMount - PullRequest
Новая
       51

Компоненты Svelte JS с или без OnMount

2 голосов
/ 03 мая 2020

Можете ли вы помочь мне понять, в чем здесь разница между этими двумя компонентами:

REPL: https://codesandbox.io/s/svelte-onmount-or-not-yhu91

  • С onMount: 
<script>
  import { onMount } from "svelte";

  let canRender;

  onMount(() => {
    setTimeout(() => {
      canRender = true;
    }, 1000);
  });
</script>

{#if canRender}I'm with onMount!{/if}
  • Без onMount: 
<script>
  let canRender;

  setTimeout(() => {
    canRender = true;
  }, 1000);
</script>

{#if canRender}I'm without onMount!{/if}

Я имею в виду, что во многих случаях мне нужно обрабатывать создание компонента с логическим значением (canRender) из-за многих события или потому что я жду некоторую задержку от реквизита.

Как насчет выступлений?

Какая разница в финальном коде?

Есть ли у меня другой способ сделать это

1 Ответ

3 голосов
/ 03 мая 2020

In Svelte onMount() - это событие жизненного цикла . Это означает, что onMount() срабатывает, когда

запускается после первой визуализации компонента в DOM

source: https://svelte.dev/tutorial/onmount

Это означает, что в первом случае вы запускаете setTimeout() при первом рендеринге компонента, во втором случае вы запускаете setTimeout(), когда JS достигает этой строки кода.

Большую часть времени вы не увидите разницу во времени ( монтирование будет очень быстрым), но если вы сделаете много вещей перед рендерингом, то onMount() будет отложено .

Основное различие между ними заключается не в производительности, а в том, что доступно при запуске вашей функции: - если вы запускаете ее без onMount() многих вещей (переменных, атрибуты и т. д. c.) будут недоступны - если вы запустите его в onMount(), компонент будет «готов» к использованию

...