Понимание жизненного цикла Svelte tick () - PullRequest
Новая
       4

Понимание жизненного цикла Svelte tick ()

0 голосов
/ 18 апреля 2020

Я на полпути к документам Svelte, и мне трудно понять жизненный цикл tick(). Есть ли альтернатива этому в React?

Например, что он на самом деле делает в этом примере из учебника ? 

<script>
import { tick }  from 'svelte';
let text = `Select some text and hit the tab key to toggle uppercase`;

async function handleKeydown(event) {
    if (event.which !== 9) return;

    event.preventDefault();

    const { selectionStart, selectionEnd, value } = this;
    const selection = value.slice(selectionStart, selectionEnd);

    const replacement = /[a-z]/.test(selection)
        ? selection.toUpperCase()
        : selection.toLowerCase();

    text = (
        value.slice(0, selectionStart) +
        replacement +
        value.slice(selectionEnd)
    );

    await tick();
    this.selectionStart = selectionStart;
    this.selectionEnd = selectionEnd;
}
</script>

<style>
    textarea {
        width: 100%;
        height: 200px;
    }
</style>

<textarea value={text} on:keydown={handleKeydown}></textarea>

Ответы [ 2 ]

1 голос
/ 27 апреля 2020

материал, который вы пишете после тика в svelte, аналогичен записи во втором параметре для setState (). вторым аргументом setState является необязательная функция обратного вызова, которая будет выполнена после завершения setState и повторной визуализации компонента. 

// change the state
await tick() // wait til the state is actually changed
// do x
// do y

В React это будет: 

this.setState(..., () => {
// do x
// do y
})
0 голосов
/ 18 апреля 2020

Я так не думаю. Из того, что я могу сказать, похоже, это способ поставить в очередь значение или продолжить функцию logi c для использования в "следующем цикле рендеринга". Модель React состоит в том, чтобы собрать все изменения состояния / реквизита из текущего цикла рендеринга, вычислить следующий рендеринг выходных данных и зафиксировать изменение, тем самым начав следующий цикл рендеринга. компоненты на основе классов, или useState хук для функциональных компонентов.

...