Go...
Go...
常见问题
@QwikDev 是一个有意识的 AI 吗?
是的,而且我还非常有趣!关注我
为什么叫 Qwik?
最初它被称为 qoot,但我们认为这个名字很难搜索。我们的一位朋友 @patrickjs__ 提出了 Qwik 这个名字,经过 builder.io 的内部投票,我们决定采用这个名字!
Qwik 与其他框架有什么不同?
Qwik 是第一个在组件编写方面与 React、Vue 或 Svelte 具有相似 DX(开发者体验)的框架,同时提供即时交互的 实时 HTML。Qwik 通过完全消除水合作用来实现这一特性。相反,Qwik 应用程序会在用户交互时立即执行事件处理程序,而无需引导所有应用程序状态。这种技术被称为可恢复性。
结果是,开发人员无需担心,即使不做任何额外的工作,他们编写的应用程序也会自动具有极高的性能。使用 Qwik 构建的应用程序无论组件数量或复杂性如何,都具有出色的性能,它们在 JS 负载方面是 O(1)(常数时间)的。
为什么需要另一个框架?
简短的答案是,Qwik 解决了其他框架无法解决的问题。无论应用程序有多复杂,Qwik 都具有即时启动性能。Qwik 应用程序的初始 JS 量不受组件数量的影响。Qwik 是第一个开源的 O(1) 框架。
Qwik City 是什么?
Qwik City 只是 Qwik 之上的一组额外的 API。可以将其视为 Qwik 是核心,City 是额外的 API(路由、数据加载、端点等)。我们将其称为 Qwik 的元框架。Qwik City 对于 Qwik 来说就像 Next.js 对于 React、Nuxt 对于 Vue、SvelteKit 对于 Svelte 一样。
Qwik 难学吗?
Qwik 是以 React(和其他基于 JSX 的框架)为设计目标的,确保学习起来轻松无压力,并提高开发效率。开发组件与 React 几乎相同,而路由则受到 Next.js 和其他框架的启发。
然而,还有一些新概念需要学习,例如可恢复性和细粒度的响应性,但我们认为学习曲线并不陡峭。
我们还有一个互动的教程,可以帮助你入门。
那些 $ 符号是什么意思?
你可能已经注意到在 Qwik 应用程序中有比平常更多的 $ 符号,例如:component$()、useTask$() 和
示例:
import { component$ } from '@builder.io/qwik';
export default component$(() => {
console.log('render');
return ;
});
由于 $ 语法,上面的组件被拆分为:
app.jsimport { componentQrl, qrl } from '@builder.io/qwik';
const App = /*#__PURE__*/ componentQrl(
qrl(() => import('./app_component_akbu84a8zes.js'), 'App_component_AkbU84a8zes')
);
export { App };
app_component_akbu84a8zes.jsimport { jsx as _jsx } from '@builder.io/qwik/jsx-runtime';
import { qrl } from '@builder.io/qwik';
export const App_component_AkbU84a8zes = () => {
console.log('render');
return /*#__PURE__*/ _jsx('p', {
onClick$: qrl(
() => import('./app_component_p_onclick_01pegc10cpw'),
'App_component_p_onClick_01pEgC10cpw'
),
children: 'Hello Qwik',
});
};
app_component_p_onclick_01pegc10cpw.jsexport const App_component_p_onClick_01pEgC10cpw = () => console.log('hello');
注意:$ 与 jQuery、Svelte 或任何其他框架无关。
Qwik 在用户交互时会下载 JS 吗?
不会。在生产环境中,Qwik 使用 SSR(服务器端渲染)期间生成的大量信息,尽快地开始预填充缓存,仅将当前页面上的交互部分作为可用部分预先加载到缓存中。这样,当用户点击或交互时,JS 已经在缓存中了。
如果 Qwik 仍然请求 JS,那有什么区别?
预填充缓存与解析和执行 JS 不同,Qwik 在用户交互之前不执行 JS。
此外,预取模块使得 Qwik 可以优先处理重要的交互部分,然后再处理不太重要的部分。
例如,“立即购买”按钮比“添加到购物车”按钮更重要,因此 Qwik 会首先预取“立即购买”按钮,然后再预取“添加到购物车”按钮。
Qwik 不需要预取所有内容才能开始运行,而其他框架需要在开始运行之前下载整个关键路径,因为水合作用的原因。
Qwik 应用在网络较慢的情况下会变慢吗?
完全不会!由于 预取模块,Qwik 应用在网络较慢的情况下不会比其他框架受到更大的影响。事实上,由于细粒度的打包和可恢复性,Qwik 应用在较少的 JS 下就可以实现交互,从而在网络较慢的情况下更快。
Qwik 会生成太多小文件吗?
在开发模式下,Qwik 会生成很多小文件,因为它使用 Dev Vite.js 服务器,但在生产模式下,Qwik 会以更高效的方式打包文件。
为什么 Qwik 使用 JSX?它是 React 底层实现吗?
不是的,Qwik 根本不使用 React。Qwik 使用 JSX 作为模板语法。
请注意,JSX 不是 React。实际上,JSX 只是语法,没有语义。我们选择 JSX 有几个原因:
熟悉的语法: 它不是重复造轮子,而是利用现有的 JS 循环、条件等。JSX 规范非常简短
生态系统: 得到 IDE、代码检查工具、安全审计工具、调试工具和高亮显示器的良好支持。
类似于 HTML: JSX 在视觉上和概念上与 HTML 类似,都是树形结构。而其他模板系统(如 html templates(lit-html))不是树形结构,而是令人难以构建和转换的令牌数组。
流行: 无论如何,JSX 都是世界上使用最广泛的模板语法。
Qwik 使用虚拟 DOM(vDOM)吗?
答案介于两者之间:
你可以将其视为一个光谱:
一个极端是 React,它始终使用 vDOM。(可以说 vDOM 是慢的。)
另一个极端是 SolidJS,它根本不使用 vDOM。(导致非常出色的性能。)
Qwik 有时使用 vDOM,其他时候则像 SolidJS 那样(直接更新 DOM)。
思考方式如下:
如果状态的更改没有结构性变化,那么 Qwik 很可能不会使用 vDOM。例如:
没有 DOM 结构变化,只是更新值export const NoStructuralChange = component$(() => {
const count = useSignal(0);
return (
<>
{/* 这不会触发 vDOM。(没有 DOM 结构变化,只是更新文本值) */}
>
);
});
当发生结构性变化时,Qwik 会使用 vDOM。在下面的示例中,DOM 结构需要更新(将