javascript - 处理具有可写存储的大型嵌套对象，性能问题

Question

我有一个可写存储

export default writable({})

我的服务器不断地向这个商店推送更新，这些处理程序在一个 js 文件中

const handlers = {
    newUser: async (user) => {
        userStore.update(user => {
            userStore[user.id] = user;
            return userStore;
        });
    },
    statusChange: ...
    more...
};

一个用户对象有多个嵌套对象和数组。我的用户页面有一个 #each循环，对于每个用户，它将用户传递给 <User />成分。然后用户组件将其他嵌套对象传递给其他组件，等等。我遇到的问题是，当我更改深度嵌套的值时，数百个用户对象和它们用于重新运行它们的 react 语句的组件。由于大部分值都没有改变，所以它们中的大多数不会重新呈现，但我有大量代码需要在更改时运行，并且即使组件实例与没有关联的用户相关，该代码也会重新运行变了。我尝试使用嵌套存储，但随后我的处理程序需要获取 (userStore) 每次更新，对于嵌套存储依此类推，直到我到达实际要更新的存储为止。另一个问题是:当更改发生在顶层时，它没有解决链下更新的问题，即添加新的 key: {user}。到 userStore。

那么有没有一种适当的方法来进行这种状态管理，而不会在没有变化的地方引起更新？

谢谢。

Answer 1

我能想到的一件事是使用 <svelte:options immutable /> 和 derived 商店。

通过使组件不可变，您可以获得更优化和有限的更新，并且派生商店引入了自己的更改跟踪，因此如果您提取对象的属性，对该对象的任何其他更改都不会触发该商店的订阅者。

例如假设 user商店有name属性，您可以将它解耦为这样的组件:

<svelte:options immutable />
<script>
    import { derived } from 'svelte/store';
    
    export let user;
    
    const name = derived(user, $user => $user.name);
    $: $name, console.log('Name changed.');
</script>

<div>
    Name: {$name}
</div>

同样，而不是应用 {#each}直接对任何嵌套属性，您可以将其拉出并将其与其他更改分开。

More complex REPL example (尝试删除 immutable 和/或派生商店。)