Компоненты SvelteJS с onMount или без него

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

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) из-за множества событий или из-за того, что я жду некоторой задержки от props.

Как насчет спектаклей?

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

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


javascript performance svelte svelte-3
person Fred Hors    schedule 03.05.2020    source источник

Ответы (2)


arrow_upward
4
arrow_downward

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

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

источник: https://svelte.dev/tutorial/onmount

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

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

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

person muka.gergely    schedule 03.05.2020
comment
Спасибо за Ваш ответ. Не могли бы вы объяснить это лучше: что доступно, когда вы запускаете свою функцию? Если у меня есть export delay, он доступен в моем коде с onMount или без него, верно? - person Fred Hors; 03.05.2020
comment
Извините, но я не очень разбираюсь в Svelte, но жизненный цикл компонента означает, что определенные функции выполняются в определенном порядке (например, настройка атрибутов компонента), и если вы вызываете функцию, которая ссылается на атрибут, не настроенный , то ваша функция не работает. В Vue, например, вы не можете вызвать атрибут вычисляемый в событии жизненного цикла beforeCreated - вычисляемые атрибуты в это время просто не существуют. (Я знаю, что это не Svelte, но жизненный цикл - это жизненный цикл во всех фреймворках :)) onMount() гарантирует, что все настроено для рендеринга DOM (согласно документации). - person muka.gergely; 03.05.2020
comment
@FredHors, так что для вашего точного вопроса (export delay) - я не уверен, мне нужно было бы больше работать с Sevelte. Но вот что: onMount() гарантирует, что все события инициализации произошли до этого, которые должны были произойти. Ваши функции / переменные могут быть доступны до этого события, но вы можете столкнуться с ошибками, поскольку это не обязательно. Просто подумайте о onMount() как о триггере, который сообщает вам, что компонент настроен, данные / функции доступны, и вы можете работать с ними. Это что-то вроде обратного вызова на этом мероприятии. - person muka.gergely; 03.05.2020

arrow_upward
1
arrow_downward

Думайте о onMount как о onload обработчике. Когда компонент загружен: запускается скрипт, разбирается css и HTML добавляется в DOM, затем запускается onMount.

Итак, в вашем примере это не будет иметь никакого значения. И да, переданные свойства доступны за пределами onMount.

Но если вы попытались получить доступ к DOM (используя что-то вроде getElementById или bind:this для привязки элемента к переменной), это не будет доступно для сценария верхнего уровня, но будет доступно в onMount.

Вот ответ, который показывает это:

https://svelte.dev/repl/eaa7656f6a98479a2d10a5a3 >

person nicholas    schedule 31.10.2020