AICon 上海站|90%日程已就绪,解锁Al未来! 了解详情
写点什么

Qwik 框架是如何实现反应式状态管理的

作者:Roman Sypchenko

  • 2025-03-23
    北京
  • 本文字数:2917 字

    阅读完需:约 10 分钟

大小:753.20K时长:04:17
Qwik框架是如何实现反应式状态管理的

本文最初发表于Medium网站,由 InfoQ 中文站翻译分享。

 

在现代 Web 开发中,状态管理是交互式应用程序的基石。在前端框架领域,Qwik 是很有前景的新成员,它引入了一种高效且新颖的反应式模型。本文将揭开 Qwik 的反应式状态管理的神秘面纱,让我们一窥其内部运行原理,并展示如何利用它构建性能优异的动态用户界面。

Qwik 反应式的基本知识

 

就其本质而言,Qwik 的反应式系统是围绕细粒度反应性(fine-grained reactivity)的概念设计的。与依赖虚拟 DOM 跟踪变化的传统框架不同,Qwik 直接在实际 DOM 上运行,它附加了监听器并且只会更新 DOM 中发生变化的部分。这种方式最大限度地减少了开销并提高了性能,尤其适用于大型应用程序。

 

我们从一个简单的计数器组件开始,以理解 Qwik 中的状态管理是如何运行的:

import { component$, useStore } from '@builder.io/qwik';

export const Counter = component$(() => { const state = useStore({ count: 0 });

return ( <div> <button onClick$={() => state.count--}>-</button> <span> {state.count} </span> <button onClick$={() => state.count++}>+</button> </div> );});
复制代码

在本例中,useStore创建了一个反应式状态,当state.count发生变化的时候,会自动更新 DOM。onClick$中的后缀$表示事件处理器是可以序列化的,并且能够延迟加载。

 

Qwik 还允许使用计算值(computed value)和副作用(side effect),这些反应式操作可以生成新数据或执行响应状态变化的操作。

import { component$, useStore, useWatch$ } from '@builder.io/qwik';

export const TemperatureConverter = component$(() => { const state = useStore({ celsius: 0 });

useWatch$(({ track }) => { track(() => state.celsius); const fahrenheit = (state.celsius * 9) / 5 + 32; console.log(`The temperature is ${fahrenheit}°F`); });

return ( <div> <label for="celsius">Celsius:</label> <input id="celsius" type="number" value={state.celsius} onInput$={(event) => (state.celsius = +event.target.value)} /> </div> );});
复制代码

TemperatureConverter组件中,useWatch$用来创建一个副作用,当celsius状态发生变化时,它会以华氏温度为单位记录温度。track函数用于指定哪个状态应该触发副作用。

反应性的幕后原理

Qwik 的反应性得益于其智能的差分(diffing)算法,该算法能够根据状态变化确定可能发生变化的最小的 DOM 范围。这是通过使用“存储”来实现的,它是一个轻量级代理,用于跟踪状态的访问和变化。

 

当组件渲染时,Qwik 会创建一个访问属性的快照。当发生改变状态的事件时,Qwik 会将新状态与快照进行对比,并且只更新 DOM 中依赖已变更属性的部分。

import { component$, useStore } from '@builder.io/qwik';

export const StoreExample = component$(() => { const store = useStore({ name: 'Qwik' });

return ( <div> <input type="text" onInput$={(event) => (store.name = event.target.value)} /> <p>Hello, {store.name}!</p> </div> );});
复制代码

StoreExample中,useStore创建了一个带有name属性的反应式存储。当输入的值发生变化时,name属性就会更新,Qwik 会自动更新<p>标签,以反映新的名称。

import { component$, useStore } from '@builder.io/qwik';

export const DiffingExample = component$(() => { const store = useStore({ firstName: 'John', lastName: 'Doe' });

return ( <div> <input type="text" placeholder="First Name" onInput$={(event) => (store.firstName = event.target.value)} /> <input type="text" placeholder="Last Name" onInput$={(event) => (store.lastName = event.target.value)} /> <p> Full Name: {store.firstName} {store.lastName} </p> </div> );});
复制代码

DiffingExample中,每个输入字段都会更新存储中的不同属性。Qwik 的差分算法确保输入First Name字段时,只会更新<p>标签的firstName部分,Last Name字段同样如此。

使用 Qwik 的优化

Qwik 的反应式模型不仅关系到性能,还涉及到开发人员的体验。该框架提供了一系列最佳实践和工具,它们使得编写高效的反应式代码更容易:

  • 内联处理器(Inline Handler):通过内联事件处理器,Qwik 可以更高效地优化应用程序的反应性。

import { component$, useStore } from '@builder.io/qwik';

export const InlineExample = component$(() => { const state = useStore({ active: false });

return ( <button onClick$={() => (state.active = !state.active)}> {state.active ? 'Active' : 'Inactive'} </button> );});
复制代码

在本例中,点击处理器是内联定义的,这样 Qwik 就能将处理器与按钮元素序列化,从而提高加载和交互效率。

  • 延迟加载(Lazy Loading):事件处理器和副作用只有在需要时才会进行加载,从而减少初始的 JavaScript 载荷。

import { component$, useStore } from '@builder.io/qwik';

export const LazyLoadingExample = component$(() => { const state = useStore({ loaded: false });

return ( <div> <button onClick$={async () => { state.loaded = true; await import('./HeavyComponent'); }} > Load Heavy Component </button> {state.loaded && <HeavyComponent />} </div> );});
复制代码

LazyLoadingExample中,HeavyComponent在用户点击按钮前并不会加载,这展示了 Qwik 是如何优化资源加载的。

 

  • 序列化(Serialization):Qwik 的事件处理器是可以序列化的,这意味着它们可以存储在 DOM 中,并在不需要加载整个组件代码的情况下再次生成(rehydrate)。

mport { component$, useStore } from '@builder.io/qwik';

export const SerializationExample = component$(() => { const state = useStore({ count: 0 });

return ( <div> <button onClick$={() => state.count++}> Increment </button> <span>Count: {state.count}</span> </div> );});
复制代码

SerializationExample中,onClick$处理器会与按钮一起序列化。当点击按钮时,Qwik 能够知道只需加载递增操作所需的代码。

 

通过应用这些优化技术,开发人员可以确保他们的 Qwik 应用程序不仅性能优异,而且还能提供无缝的用户体验。Qwik 对优化的重视体现在其 API 设计中,它鼓励开发人员只需编写代码即可,性能更好的应用程序是水到渠成的。

结论

Qwik 的反应式状态管理印证了该框架对性能和可扩展性的承诺。通过了解和利用其反应性模型,开发人员可以创建出不仅速度快捷、反应灵敏,而且可维护性强、易于使用的 web 应用。

 

随着 web 开发的不断发展,像 Qwik 这样的框架正在引领着潮流。凭借其神奇的底层技术,Qwik 将成为重视性能和用户体验的开发人员的最爱。

2025-03-23 11:004504

评论

发布
暂无评论

鸿蒙应用开发从入门到入行 - 篇3:ArkUI布局基础与制作可交互页面

猫林老师

鸿蒙 HarmonyOS 鸿蒙应用开发 鸿蒙原生应用开发 HarmonyOS NEXT

Ascend Extension for PyTorch是个what?

zjun

PyTorch CANN Ascend

Ascend上的FlashAttention实现

zjun

Transformer 大模型 Ascend

鸿蒙应用开发从入门到入行 - 篇7:http网络请求

猫林老师

鸿蒙 HarmonyOS 鸿蒙应用开发 鸿蒙原生应用开发 HarmonyOS NEXT

VMware ESXi 8.0U3c Unlocker & OEM BIOS 集成网卡驱动和 NVMe 驱动 (集成驱动版)

sysin

esxi

开辟新蓝海 华为坤灵剑指中小企业安全增量市场

极客天地

《Django 5 By Example》阅读笔记:p614-p644

codists

Python django

安全架构师的自我修炼:从原则到实践

I

安全架构师 信息安全 安全设计 企业安全 安全架构设计

Splunk Enterprise 9.4 发布,新增功能概览

sysin

Splunk Enterprise

uniapp开发鸿蒙,是前端新出路吗?

猫林老师

前端 HarmonyOS

鸿蒙JSON对象里面的Map类型的数据如何接收

flfljh

第78期 | GPTSecurity周报

云起无垠

VMware Workstation 17.6.2 Pro Unlocker & OEM BIOS 2.7 for Windows & Linux

sysin

Workstation

Ascend Extension for PyTorch的源码解析

zjun

模型 PyTorch Ascend

鸿蒙next中Web的使用

flfljh

SelfAttention在Ascend上的实现

zjun

Transformer 大模型 Ascend

VMware ESXi 7.0U3r Unlocker & OEM BIOS 标准版和厂商定制版

sysin

esxi

Ascend上的PageAttention

zjun

大模型 Ascend PagedAttention

【万字长文】MarsCode结合 Manim 打造炫酷的算法演示动画

战场小包

Python AI 代码生成 AIGC

VMware Fusion 13.6.2 OEM BIOS 2.7

sysin

VMware Fusion 虚拟机

0基础跟练!代码小白也能搭建自己的专属 AI 聊天助手

Trae

AI 聊天机器人 AI编程 聊天助手 豆包MarsCode

Kafka 迁移 AutoMQ 时 Flink 位点管理的挑战与解决方案

AutoMQ

深度学习的下一站:解锁人工智能的新边界

天津汇柏科技有限公司

深度学习 AI 人工智能

“全球金牌敏捷课程” · 12月28-29日CSM认证课程 · Jim老师引导讨论AI & Agility话题

ShineScrum

鸿蒙应用开发从入门到入行 - 篇6:数据监听器、滚动、侧滑功能

猫林老师

鸿蒙 HarmonyOS 鸿蒙应用开发 鸿蒙原生应用开发 HarmonyOS NEXT

智谱清言英特尔酷睿Ultra专享版发布,离线模型玩转AIPC

E科讯

还在为入门鸿蒙效率慢而困惑?不妨试试开发学习神器 - AI辅助编程

猫林老师

鸿蒙 HarmonyOS 鸿蒙应用开发 鸿蒙原生应用开发 HarmonyOS NEXT

HarmonyOS鸿蒙开发 - 解决上下两栏白边 - 沉浸式效果

猫林老师

HarmonyOS 鸿蒙应用开发 鸿蒙原生应用开发 HarmonyOS NEXT

鸿蒙开发:前端页面调用 ArkTS 函数全解析

flfljh

VMware ESXi 8.0U3c Unlocker & OEM BIOS 标准版和厂商定制版

sysin

esxi

VMware ESXi 7.0U3r Unlocker & OEM BIOS 集成网卡驱动和 NVMe 驱动 (集成驱动版)

sysin

esxi

Qwik框架是如何实现反应式状态管理的_后端_InfoQ精选文章