6月14日，我在佛罗伦萨参加了一个关于Qwik的令人惊叹的研讨会，该Qwik由Qwik的创建者Misko Hevery和Qwik Core Core的贡献者和拥护者Giorgio Boa参加。

以防万一Misko的名字听起来很熟悉，他也是Angular的创造者。

如此美好的一天！我学到了很多关于Qwik的知识，我遇到了很多伟大的人，我为这张自拍照感到自豪！

QWIK研讨会

今天，我想与您分享我在研讨会期间学到的东西的一些亮点。

您可以在这里找到我将在video below中介绍的主题的简短摘要。

重复性

Qwik的关键因素之一是它基于 ROSMUMISIOS 。

简而言之，首先在服务器上渲染组件，然后“暂停”并发送给客户端。当客户端接收该组件时，它将其作为普通的HTML（和CSS）接收到，并附有序列化状态，没有任何事情发生。没有下载额外的JavaScript。

这使页面加载很快。真的很快。

当用户与组件进行交互时，下载了JS代码，并且在客户端上完全从状态开始“恢复”组件。

单击来源

很酷的东西，您可以按住Alt键，然后单击页面的任何元素，以查看直接在vscode上生成的组件的源代码。

Qwik并不是唯一做到这一点的框架，但它可以正常工作，值得一提。

信号

Qwik本地使用信号。最大的优势是，当状态变化时，较少的组件需要一个摄影器。实际上，只有真正需要更新的部分才能更新。如果不需要，儿童组件就不会填充。

您可以将useSignal用于原始值，也可以将useStore用于对象。

对变化反应

与您所知道的useEffect类似，Qwik具有useTask的依赖性阵列的最大区别，该阵列已被删除。

useTask$(({ track, cleanup }) => {
  track(filter);
  const id = setTimeout(() => (debouncedFilter.value = filter.value), 400);
  cleanup(() => clearTimeout(id));
});

您可以通过使用track来跟踪依赖项，并在需要的情况下返回cleanup函数。

折叠下方的组件

与Astro类似，您可以确保屏幕上当前不可见的某些组件不是动态的。一旦到达那里，JS代码就会下载并发生魔术。

useVisibleTask$是可能的。

范围的风格

您可以轻松地调整样式以避免与其他组件发生冲突。

import CSS from "./index.css?inline";

...

useStylesScoped$(CSS);

组合数据

再次反应类比，类似于usememo，您可以使用USECOMPOUDE的数据组合数据。

const fullName = useComputed$(() => `${firstName} ${lastName}`);

如果您将数据存储在信号或商店中，则可以很好地工作。

异步检索数据

useResource$方法将使您以useTask$的功率获得异步数据，带有track，cleanup和一些额外的功能，例如<Resource>内置组件，它允许您处理加载和错误状态。

<Resource
  value={reposResource}
  onPending={() => <>Loading...</>}
  onRejected={(error) => <>Error: {error.message}</>}
  onResolved={(repos) => (
    <ul>
      {repos.map((repo) => (
        <li key={repo}>
          <a href={`/github/${github.org}/${repo}`}>{repo}</a>
        </li>
      ))}
    </ul>
  )}
/>

路由参数

useLocation与routeLoader$结合使用，如果您需要从URL读取参数并进行一些服务器端计算。

仅服务器操作

说到服务器，如果您想在那里发生某些事情而不是在客户端上发生某些事情，例如访问数据库或处理一些可能具有私钥的外部调用，则可以使用server$。

为Qwik做出了贡献

Qwik是开源的，您可以在GitHub repo官方以及创建集成，开发工具和其他项目中做出贡献。

我可以提到的一个很酷的是qwik-ui，是Qwik的官方UI库。

听起来很酷？

如果提到的某些主题对您来说很有趣，那很棒，我将扩展它们并在我录制的视频中显示一些编码：

感谢您阅读这篇文章，这是简短的，但我希望您发现它很有趣！

我最近启动了我的Discord服务器来谈论开源和Web开发，请随时加入：https://discord.gg/bqwyEa6We6

您喜欢我的内容吗？您可以考虑订阅我的YouTube频道！这对我来说意义重大€
您可以在这里找到它：

随时关注我在新文章发布时得到通知;）