Как обрабатывать обновления реквизита в жизненных циклах? - PullRequest
Новая
       10

Как обрабатывать обновления реквизита в жизненных циклах?

1 голос
/ 25 мая 2019

Если родительский компонент обновляет значение реквизита, которое он передает дочернему компоненту в рамках жизненного цикла, как дочерний компонент может использовать последнее значение этого реквизита в своих собственных жизненных циклах?

Вот пример, где значение опоры не определено в жизненных циклах дочернего компонента:

App.svelte

<script>
    import { onMount } from 'svelte';
    import Nested from './Nested.svelte';

    let name;

    onMount(() => {
        name = "world";
    })
</script>

<h1>Hello <Nested name="{name}" /></h1>

Nested.svelte

<script>
    import { onMount, afterUpdate } from 'svelte';

    export let name;

    onMount(() => {
        console.log("mount name:", name);
    })

    afterUpdate(() => {
        console.log("after update name:", name);
    })
</script>

<span>{name}</span>

https://svelte.dev/repl/65ac3d9c3913408bad459e2ad2a27d8e?version=3.4.2

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

App.svelte

<script>
    import { onMount } from 'svelte';
    import Nested from './Nested.svelte';

    let name;

    onMount(() => {
        name = "world";
    })
</script>

<h1>Hello <Nested name="{name}" /></h1>

Nested.svelte

<script>
    import { onMount, afterUpdate, tick } from 'svelte';

    export let name;

    onMount(async () => {
        await tick();
        console.log("mount name:", name);
    })

    afterUpdate(async () => {
        await tick();
        console.log("after update name:", name);
    })
</script>

<span>{name}</span>

https://svelte.dev/repl/9e66f312a17d41a8adf6e3e3b95c5327?version=3.4.2

1 Ответ

0 голосов
/ 25 мая 2019

Нет логичной ситуации, когда кто-либо установил бы состояние синхронно в onMount хуке так, как вы это сделали, потому что, если вы хотите, чтобы оно было там, когда оно монтируется, вы должны установить его в let name = 'world';

Логической ситуацией может быть установка состояния в асинхронном режиме в onMount hook (например, сделать запрос ajax и установить значение ответа ajax в состояние).

если вы попытаетесь симулировать асинхронную операцию, подобную этой 

// App.svelte
onMount(() => {
    setTimeout(()=>{
        name = "world";
    },0)
})

, все работает без необходимости использования tick().afterUpdate Хук получает обновленное значение, как и ожидалось.

https://svelte.dev/repl/9e0411ed66e34e2e8ac1937e41b2709a?version=3.4.2

...