了解 Svelte tick() 生命周期

Question

我已经阅读了 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>

Answer 1

当您更新（反应式）变量时，它不会立即反映到 DOM 上，更新会与下一个更新周期中的其他更改和更新一起批处理。

就像反应一样，如果你这样做

this.setState({ foo: 123 });

this.state.foo // you don't expect to read 123
// because this.setState is asynchronous!

让我们看一个例子，看看我们如何在 React 和 svelte 中做到这一点

假设您有一个不断增长的文本输入，当您键入时，其高度应该增加，以容纳更多文本。

在 React 中你可能会这样做：

function GrowingTextInput() {
   const ref = useRef();
   const [value, setValue] = useState('');
   const updateText = (newValue) => {
     setValue(newValue);
     // NOTE: you can't measure the text input immediately
     // and adjust the height
     // you do it in useEffect
   }

   useEffect(() => {
     calculateAndAdjustHeight(ref.current, value);
   }, [value]);

   return <textarea value={value} ref={ref} />
}

useEffect在状态更新应用于 DOM 后，您可以对 DOM 元素进行调整。

在 svelte 中，你可以这样做：

<script>
  let ref;
  let value;
  const updateText = async (newValue) => {
     value = newValue;
     // NOTE: you can't measure the text input immediately
     // and adjust the height, you wait for the changes to be applied to the DOM
     await tick();
     calculateAndAdjustHeight(ref, value);
   }
</script>

<textarea bind:this={ref} {value} />

在 Svelte 中，要等待应用状态更改，您await需要从tick().

如果您喜欢更直观的内容，我已尝试在 YouTube 视频中对其进行解释：

https://youtu.be/JjONMdhaCDs

另外，这是我对您可以使用的其他用例的看法tick()：

https://dev.to/tanhauhau/2-amazing-use-case-of-tick-in-svelte-that-you-must-know-8pa

Answer 2

在 svelte 中的 tick 之后编写的内容与在 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
})

Answer 3

我不这么认为。据我所知，这似乎是一种对值进行排队或继续函数逻辑以在“下一个渲染周期”中使用的方法。React 的模型是收集当前渲染周期中的所有状态/属性更改，计算下一个渲染输出，并提交更改，从而开始下一个渲染周期。

最接近 React 的是this.setState基于类的组件，或者useState函数组件的钩子。