“qwik-react” 如何将一个 React 组件转换为一个 Qwik 组件?

huangapple go评论54阅读模式
英文:

How does "qwik-react" convert a React component to a Qwik component?

问题

如何使用 "qwik-react" 将 React 组件转换为 Qwik 组件?它只是使其与 Qwik 兼容,还是将其转换为真正的 Qwik 组件?开发人员构建 Qwik 组件和库是否有任何优势?

例如,如果我想将 Chakra UI 作为我的 UI 工具包,根据 Qwik 网站文档,我应该创建一个名为 "chakra-ui-qwik" 的文件,并以以下方式导出我想要使用的每个组件:

import { qwikify$ } from '@builder.io/qwik-react';
import { Box, Container, Divider, Link, Text } from "@chakra-ui/react";

export const QBox = qwikify$(Box);
export const QContainer = qwikify$(Container);
export const QDivider = qwikify$(Divider);
export const QLink = qwikify$(Link);
export const QText = qwikify$(Text);

所以开发人员不需要开发 @chakra-ui/qwik 库,只需使用 @chakra-ui/react 就足够了。

英文:

How does "qwik-react" convert a React component to a Qwik component? Does it simply make it compatible with Qwik or does it transform it into a true Qwik component? Is there any advantage for developers to build Qwik components and libraries?

For example, if I want to use Chakra UI as my UI kit, according to the Qwik website documentation, should I create a file named "chakra-ui-qwik" and export each component I want to use in the following manner:

import { qwikify$ } from '@builder.io/qwik-react';
import { Box, Container, Divider, Link, Text } from "@chakra-ui/react";

export const QBox = qwikify$(Box);
export const QContainer = qwikify$(Container);
export const QDivider = qwikify$(Divider);
export const QLink = qwikify$(Link);
export const QText = qwikify$(Text);

So there is no need for developers to develop @chakra-ui/qwik library and @chakra-ui/react is enough?

答案1

得分: 1

在这里,您可以找到UI库,允许您使用Qwik的优化。

实际上,在Qwik中使用React是可能的,但会失去一些框架提供的优势。

在Qwik文档的qwikify部分中,您可以找到一些信息。

从文档中提取:

在Qwik中使用React组件是将您的应用程序迁移到Qwik的好方法,但这并不是一种解决所有问题的方法,您需要重写您的组件以充分利用Qwik的特性。

不要滥用qwikify$()来构建您的应用程序,因为过度使用会导致性能增益丧失。

英文:

Here you can find UI libraries that allow you to use the Qwik optimizations.
In fact, using react inside Qwik is possible, but losing some benefits that the framework offers you.

In the Qwik documentation, qwikify section you can find several information.

Extract from the documentation:

Using React components in Qwik is a great way to migrate your application to Qwik, but it's not a silver bullet, you will need to rewrite your components to take advantage of Qwik's features.

> Don't abuse qwikify$() to build your application, as overusing will cause performance gains to be lost.

huangapple
  • 本文由 发表于 2023年6月5日 07:56:07
  • 转载请务必保留本文链接:https://go.coder-hub.com/76402870.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定