Qwik常见问题

常见问题

@QwikDev是Ai吗?

是的,而且他十分有趣。follow me

为什么叫Qwik?

最初它被称为qoot,但是我们认为这个名字不利于搜索。而后一个社区成员@PatrickJS__提出了Qwik这个名字,经过builder.io投票后,就这样定了。

Qwik跟其他框架有什么不同?

Qwik是第一个在编写组件方面与React,Vue或者Svelte类似的开发体验的框架,同时提供及时交互的Live HTML。Qwik通过消除水合来实现这一特性。与他们相反的是,Qwik会在用户交互的时候立即执行事件处理,而不需要去引导应用程序。这被称之为可恢复性。

由以上操作,使得Qwik获得了极高的性能。开发人员无需关心组件复杂度,因为就JS负载而言,Qwik的复杂度永远是O(1)。

为什么不选择以前的框架?

简单回答:Qwik是唯一一个开源O(1)复杂度的框架

什么是Qwik City?

简而言之,就是core。类比与Next.js于React、Nuxt.js于Vue、SvelteKit于Svelte。

难吗?

如果熟悉React或者其他JSX开发,一点都不困难。路由几乎与Next.js一致,组件开发与React一致。

当然还是需要学习一些新的概念,比如Qwik的Live HTML,Qwik的可恢复性,Qwik的细粒度反应性等等。我认为学习曲线相对平滑。

特别是相对于Rust。笑~

$ 表示什么意思?

$是Qwik中充当延迟加载的标记。使用他之后会讲这部分分成细粒度Bundle。

例如:

tsx 复制代码
import { component$ } from '@builder.io/qwik';
 
export default component$(() => {
  console.log('render');
  return <button onClick$={() => console.log('hello')}>Hello Qwik</button>;
});

由于$语法糖,上面的组件会被打包成以下几个文件

  • app.js
js 复制代码
import { componentQrl, qrl } from '@builder.io/qwik';
 
const App = /*#__PURE__*/ componentQrl(
  qrl(() => import('./app_component_akbu84a8zes.js'), 'App_component_AkbU84a8zes')
);
 
export { App };
  • app_component_akbu84a8zes.js
js 复制代码
import { 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.js
js 复制代码
export const App_component_p_onClick_01pEgC10cpw = () => console.log('hello');

注意:$ 与其他框架(JQuery、Svelte)无关!

如果将细粒度操作分成多个js,用户交互请求不是会很慢吗?

不会。

首先,这个js文件只会在用户交互时才会被下载,并且可用在Service Worker中预先获取当前页面的js模块。其次,js文件是会被浏览器缓存的,所以不会每次都去下载。

这种策略被称之为推测模块获取。需要水合的框架必须在页面加载加载之时就将所有的js文件都加载完毕,无法利用这种策略。

Qwik怎么知道需要预先获取哪些模块?以及按什么顺序获取?

在生产环境中,Qwik在SSR期间生成大量信息用户尽快开始填充页面。只在页面上提供可用的交互位置。这样,当用户开始交互的时候,js就已经在缓存中了。

此外,Qwik insights将会根据优先级来确认先构造哪一部分。

例如,立即购买按钮比添加到购物车按钮更重要。因此,Qwik会优先构建立即购买按钮。

在弱网环境下,Qwik会不会影响用户体验?

emmm,恰恰相反。

Qwik不需要预先获取所有的内容,即可开始运行。其他框架却需要所有的内容都加载完毕才能开始运行。

事实上,Qwik能够减少网络瀑布流,因此在请求时,该模块可能已经被缓存。即使尚未被缓存,Qwik也可以避免重复请求同一模块。

因此,Qwik在弱网环境下的响应更快。

这是来自于高贵的鱼塘主:慕容云海的产物~

相关推荐
葡萄城技术团队4 分钟前
用 Sheet 页导航视图管理复杂 SpreadJS 工作簿
前端
志尊宝7 分钟前
Vue3 零基础每日笔记(054):Pinia 三件套详解——state / getters / actions 全搞懂
前端·javascript·vue.js·vue·前端开发
Caroline51619 分钟前
GPT Image 2.5还能这么玩!一套提示词生成IP吉祥物,附完整案例
前端·gpt·tcp/ip
wangyadong31731 分钟前
# el-table 复选框无法选中问题记录
前端·javascript·vue.js
葡萄城技术团队40 分钟前
给 SpreadJS 单元格装上自动完成
前端
恋猫de小郭1 小时前
Flutter 多窗口重要优化合并,多窗口性能和实用性大幅提升
android·前端·flutter
StudyAndLife1 小时前
开源一个 API 开放平台门户前端:本地 npm run dev 就能逛接口文档
前端
广州华水科技1 小时前
GNSS变形监测一体机在大坝安全监测中的应用与优势分析
前端
hunteritself1 小时前
夯爆了!Qoder 狂肝 2 小时,293 个测试全绿,Credits 一分没扣
前端·人工智能·chrome·深度学习·机器学习
Hilaku1 小时前
为什么前端应该主动去学数据库?
前端·javascript·程序员