我通常避免在 TypeScript 代码中使用类，倾向于使用函数以简化代码，并利用 tree shaking 的优势避免引入不必要的类方法。
然而，Rich Harris 建议在某些情况下使用符文类可以提高性能，因为它们无需使用 get 和 set 方法或中间 $state 变量来管理状态，从而直接操作状态。
可共享符文
我们需要一个可共享的符文类，这需要用到 Svelte 的上下文机制。
// rune.svelte.tsimport { get, has, set } from 'svelte';type RCurrent = { current: TValue };export class Rune { readonly #key: symbol; constructor(name: string) { this.#key = Symbol(name); } exists(): boolean { return has(this.#key); } get(): RCurrent { return get(this.#key); } init(value: TRune): RCurrent { const _value = { current: value }; return set(this.#key, _value); } update(getter: () => TRune): void { const context = this.get(); // 使用 $effect 或类似的响应式机制 // ... (此处需要根据实际的响应式机制进行调整) ... }}
我们可以导出自定义符文到其他组件中使用。
// counter.svelte.tsimport { Rune } from './rune.svelte';export const counter = new Rune('counter');
这是共享状态的一种方法，它与服务器端渲染兼容（详见之前的讨论）。 需要注意的是，我们需要为每个共享状态变量赋予一个唯一的名称。
初始化
状态的初始化，如同其他上下文一样，应该在父组件中进行，并且只初始化一次。
import { counter } from '$lib/counter.svelte'; const count = counter.init(0);
在子组件中读取
子组件可以安全地读取状态：
import { counter } from '$lib/counter.svelte'; const count = counter.get();子组件：{count.current}
响应式更新
更新共享状态需要通过一个函数来实现响应式更新：
import { counter } from '$lib/counter.svelte'; let value = 0; // 或者其他响应式变量 counter.update(() => value);
这使得更新具有响应性。我们可以传入任何响应式变量，它会像 $derived 一样更新。
直接更新
当然，也可以直接更新：
import { counter } from '$lib/counter.svelte'; const count = counter.get(); count.current = 9;
代码仓库演示
希望这些信息对您有所帮助。
以上就是在 Svelte 中与符文类共享符文的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1500717.html
微信扫一扫 
支付宝扫一扫 
