javascript - svelte 如何使组件变脏

Question

下面的片段是我们执行 npm run dev 时生成的内容。在 svelte应用程序。

    function make_dirty(component, i) {
        if (component.$$.dirty[0] === -1) {
            dirty_components.push(component);
            schedule_update();
            component.$$.dirty.fill(0);
        }
        component.$$.dirty[(i / 31) | 0] |= (1 << (i % 31));
    }

任何人都可以解释下面的声明发生了什么吗？为什么数字 31 是硬编码的？

component.$$.dirty[(i / 31) | 0] |= (1 << (i % 31)); 

谢谢

Answer 1

为了扩展 Tijmen 的答案，我将尝试解释此代码的一些基本原理以及它实际在做什么。

位掩码是一种将多个 bool 选项存储在单个整数中的技术。假设您有选项 A、B、C 和 D——您将值 1、2、4 和 8 分配给它们，然后您可以存储这些选项的任意组合，如下所示:

AB — 3

BD — 10

ACD — 13

稍后，您可以使用 bitwise operators 检索该值。 :

if (opts & 1) console.log('A was selected');
if (opts & 2) console.log('B was selected');
if (opts & 4) console.log('C was selected');
if (opts & 8) console.log('D was selected');

Svelte 使用位掩码来跟踪哪些值是脏的，即自组件上次更新以来发生了什么变化。由于 Tijmen 描述的 31 位限制，单个位掩码只能让我们在一个组件中拥有 31 个变量——在大多数情况下很多，但肯定不是全部。所以 component.$$.dirty是一个位掩码数组。

这行代码...

component.$$.dirty[(i / 31) | 0] |= (1 << (i % 31));

...弄脏正确位掩码的正确位 — (i / 31) | 0给我们位掩码的索引， (1 << (i % 31))给我们该位掩码中位的值，以及 |=将该位设置为 1，无论它之前的值是什么。

-1 用作 sentinel value用于指示该组件以前根本没有脏，以便 Svelte 可以将其添加到需要在下一次更新中更新的组件列表中。