如何从 React 迁移到 Qwik？ - 面试题

从 React 迁移到 Qwik 是一个渐进式的过程，可以逐步进行。以下是详细的迁移策略和最佳实践：

1. 评估和准备

评估现有项目

在开始迁移之前，需要评估以下方面：

项目规模和复杂度
使用的第三方库
性能需求和目标
团队对 Qwik 的熟悉程度

创建 Qwik 项目

bash
# 创建新的 Qwik 项目
npm create qwik@latest

# 或者在现有项目中添加 Qwik
npm install @builder.io/qwik

2. 核心概念映射

组件定义

React:

tsx
import React from 'react';

export const MyComponent = ({ name }: { name: string }) => {
  return <div>Hello {name}</div>;
};

Qwik:

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

export const MyComponent = component$(({ name }: { name: string }) => {
  return <div>Hello {name}</div>;
});

状态管理

React:

tsx
import { useState } from 'react';

export const Counter = () => {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

Qwik:

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

export const Counter = component$(() => {
  const count = useSignal(0);
  
  return (
    <div>
      <p>Count: {count.value}</p>
      <button onClick$={() => count.value++}>Increment</button>
    </div>
  );
});

事件处理

React:

tsx
export const Button = () => {
  const handleClick = () => {
    console.log('Clicked');
  };
  
  return <button onClick={handleClick}>Click me</button>;
};

Qwik:

tsx
export const Button = component$(() => {
  const handleClick$ = () => {
    console.log('Clicked');
  };
  
  return <button onClick$={handleClick$}>Click me</button>;
});

3. 逐步迁移策略

阶段 1：基础设施迁移

设置 Qwik 项目结构
配置构建工具
设置路由系统（Qwik City）
配置 TypeScript 和 ESLint

阶段 2：简单组件迁移

从简单组件开始迁移：

无状态组件
展示型组件
独立的功能组件

tsx
// React
export const Header = ({ title }: { title: string }) => {
  return <header><h1>{title}</h1></header>;
};

// Qwik
export const Header = component$(({ title }: { title: string }) => {
  return <header><h1>{title}</h1></header>;
});

阶段 3：状态管理迁移

迁移使用状态管理的组件：

使用 useSignal 替换 useState
使用 useStore 替换复杂状态
使用 useContext 替换 Context API

tsx
// React
import { useState, useContext } from 'react';

export const Counter = () => {
  const [count, setCount] = useState(0);
  const theme = useContext(ThemeContext);
  
  return (
    <div className={theme}>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

// Qwik
import { component$, useSignal, useContext } from '@builder.io/qwik';

export const Counter = component$(() => {
  const count = useSignal(0);
  const theme = useContext(ThemeContext);
  
  return (
    <div class={theme}>
      <p>Count: {count.value}</p>
      <button onClick$={() => count.value++}>Increment</button>
    </div>
  );
});

阶段 4：复杂组件迁移

迁移复杂组件：

带有副作用的组件
使用 hooks 的组件
异步数据获取组件

tsx
// React
import { useEffect, useState } from 'react';

export const UserList = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    fetchUsers().then(data => {
      setUsers(data);
      setLoading(false);
    });
  }, []);
  
  if (loading) return <p>Loading...</p>;
  
  return (
    <ul>
      {users.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
};

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

export const UserList = component$(() => {
  const users = useResource$(() => fetchUsers());
  
  return (
    <div>
      {users.value ? (
        <ul>
          {users.value.map(user => <li key={user.id}>{user.name}</li>)}
        </ul>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
});

阶段 5：路由和布局迁移

迁移路由和布局系统：

使用 Qwik City 的文件系统路由
迁移布局组件
迁移路由守卫和中间件

4. 常见问题和解决方案

问题 1：第三方库兼容性

解决方案：

查找 Qwik 兼容的替代库
使用 useClientEffect$ 包装不兼容的库
创建适配器层

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

export const ThirdPartyComponent = component$(() => {
  useVisibleTask$(() => {
    // 只在客户端执行第三方库
    const library = require('third-party-library');
    library.init();
  });
  
  return <div id="third-party-container"></div>;
});

问题 2：CSS 模块迁移

解决方案：

Qwik 原生支持 CSS 模块
保持相同的导入方式

tsx
// React
import styles from './Button.module.css';

export const Button = () => {
  return <button className={styles.button}>Click</button>;
};

// Qwik
import styles from './Button.module.css';

export const Button = component$(() => {
  return <button class={styles.button}>Click</button>;
});

问题 3：表单处理

解决方案：

使用 Qwik City 的 action$ 替换表单处理
使用 Form 组件替代原生表单

tsx
// React
export const ContactForm = () => {
  const handleSubmit = async (e) => {
    e.preventDefault();
    await submitForm(data);
  };
  
  return <form onSubmit={handleSubmit}>...</form>;
};

// Qwik
import { component$, Form } from '@builder.io/qwik-city';
import { action$ } from '@builder.io/qwik-city';

export const useContactForm = action$(async (data) => {
  await submitForm(data);
  return { success: true };
});

export const ContactForm = component$(() => {
  const action = useContactForm();
  
  return <Form action={action}>...</Form>;
});

5. 性能优化迁移

React 优化技术到 Qwik 的映射

React	Qwik
`useMemo`	`useComputed$`
`useCallback`	不需要（自动优化）
`React.memo`	不需要（自动优化）
`useEffect`	`useTask$` / `useVisibleTask$`
代码分割	自动细粒度分割

6. 测试迁移

单元测试

tsx
// React (Jest)
import { render, screen } from '@testing-library/react';
import { Counter } from './Counter';

test('increments count', () => {
  render(<Counter />);
  const button = screen.getByText('Increment');
  button.click();
  expect(screen.getByText('Count: 1')).toBeInTheDocument();
});

// Qwik (Vitest + Testing Library)
import { render, screen } from '@builder.io/qwik/testing';
import { Counter } from './Counter';

test('increments count', async () => {
  const { render } = await render(Counter);
  const button = screen.getByText('Increment');
  await button.click();
  expect(screen.getByText('Count: 1')).toBeInTheDocument();
});

7. 最佳实践

1. 不要一次性迁移整个项目

逐步迁移，每次迁移一个模块
保持 React 和 Qwik 代码共存一段时间

2. 利用 Qwik 的自动优化

不需要手动优化性能
专注于业务逻辑

3. 使用 Qwik 的开发工具

Qwik DevTools 用于调试
Qwik CLI 用于快速开发

4. 保持代码简洁

Qwik 的语法更简洁
利用 $ 符号简化代码

5. 充分利用 Qwik City

使用文件系统路由
使用服务端数据加载
使用表单处理功能

总结：从 React 迁移到 Qwik 是一个渐进式的过程，可以逐步进行。通过理解核心概念映射、遵循迁移策略和最佳实践，可以顺利完成迁移并获得更好的性能表现。