web-react

web-react

用途

此技能提供 React 19 方面的专业知识，用于构建动态 Web 应用，重点介绍 hooks、context、suspense、服务器/客户端组件、useActionState、编译器和 React Query 等高级功能，以实现高效的状态管理和数据处理。

适用场景

• 适用于需要现代 hooks（例如 useActionState）或使用 suspense 进行服务器端渲染的新 React 项目。
• 适用于在 Web 应用中集成 React Query 进行数据获取，尤其是实时更新或 API 交互场景。
• 适用于在大型应用中利用服务器/客户端组件优化性能。
• 适用于需要使用 context 管理全局状态而不依赖 Redux，或使用 suspense 处理异步操作的场景。

主要功能

• Hooks：使用 useState、useEffect、useContext 管理本地状态和副作用；在 React 19 中使用 useActionState 管理表单状态和操作。
• Context：创建 context provider，在组件间共享数据，例如主题或用户身份验证信息。
• Suspense：使用组件包裹实现延迟加载，例如使用 <Suspense fallback={
  Loading...
  }> 处理 Promise。
• 服务器/客户端组件：使用 'use server' 指令区分仅在服务器端运行的代码，并通过客户端组件实现交互。
• React Query：使用 useQuery 获取数据以管理服务器状态，并使用 useMutation 更新数据；响应会自动缓存。
• 编译器：利用 React 19 的编译器，通过构建工具实现自动优化，例如打包和 tree-shaking。
• 其他：使用 useActionState 处理服务器操作表单，减少客户端 JavaScript。

使用模式

• 使用 hooks 管理状态时，按如下方式导入和使用：

  import { useState } from 'react';
  const [count, setCount] = useState(0);
  

• 使用 context 时，按如下方式创建和使用：

  import { createContext, useContext } from 'react';
  const ThemeContext = createContext('light');
  const App = () => useContext(ThemeContext);
  

• 为延迟加载的组件实现 suspense：

  import { Suspense } from 'react';
  <Suspense fallback={<Spinner />}>
    <LazyComponent />
  </Suspense>
  

• 使用 React Query 获取数据：

  import { useQuery } from '@tanstack/react-query';
  const { data, isLoading } = useQuery(['key'], () => fetchData());
  

• 对于服务器/客户端组件，在文件顶部使用 'use server' 标记仅在服务器端运行的逻辑，然后将其导入客户端组件。

常用命令/API

• Hooks API：调用 useActionState 处理表单，例如 const [state, action] = useActionState(formAction, initialState); 其中 formAction 是异步函数。
• Suspense API：使用 <React.Suspense> 作为 suspense 边界，并通过 fallback 属性设置加载状态。
• React Query 命令：使用 useQuery hook 执行查询；进行修改时，使用 useMutation({ mutationFn: asyncFn }); React Query 命令行工具：运行 npx @tanstack/query start 启动开发服务器。
• 编译器标志：在 React 19 项目中，通过 Vite 等构建工具使用编译器，并设置标志 --react-compiler 来启用优化；在 Webpack 中，添加 module: { rules: [{ test: /.js$/, use: 'react-compiler' }] }。
• API 端点：对于 React Query，从 fetch('/api/data', { headers: { Authorization: Bearer ${process.env.REACT_APP_API_KEY} } }); 等端点获取数据；在 .env 文件中将环境变量设为 $REACT_APP_API_KEY。
• 配置格式：在代码中配置 React Query：const queryClient = new QueryClient({ defaultOptions: { queries: { staleTime: 5 * 60 * 1000 } } }); 用于设置全局选项。

集成说明

• 通过安装依赖项与其他工具集成：npm install react react-dom @tanstack/react-query；然后使用 包裹应用。
• 对于身份验证，使用环境变量：在 .env 文件中设置 $REACT_APP_API_KEY，并在 fetch 调用中通过 process.env.REACT_APP_API_KEY 访问。
• 与服务器组件结合时，确保完成服务器端设置（例如 Next.js）并使用 'use server' 指令；对于客户端代码，直接导入 hooks。
• 与 web-dev 集群工具连接：如果使用后端，可在 package.json 中设置代理来配置 React Query 处理 CORS："proxy": "http://localhost:5000"。
• 使用 React 19 功能时，确保项目使用 React 19+；将 "react": "^19.0.0" 添加到 package.json，然后运行 npm install。

错误处理

• 对于 hooks，在 useEffect 清理函数中捕获错误：useEffect(() => { const cleanup = () => { try { /* code */ } catch (e) { console.error(e); } }; return cleanup; }, []);
• 使用错误边界处理 suspense 错误：创建一个类似这样的组件：class ErrorBoundary extends React.Component { state = { error: null }; componentDidCatch(error) { this.setState({ error }); } render() { return this.state.error ?
  Error: {this.state.error.message}
  : this.props.children; } }; 用它包装 suspense。
• 在 React Query 中，在 useQuery 中使用 onError：useQuery({ queryFn: fetchData, onError: (error) => console.error('Fetch failed:', error) }); 如需全局处理，请在 QueryClient 中设置：new QueryClient({ defaultOptions: { queries: { onError: handleGlobalError } } }).
• 对于服务端组件，通过检查响应来处理 fetch 错误：async function serverAction() { try { const res = await fetch('/api/data'); if (!res.ok) throw new Error('Network response not ok'); } catch (e) { return { error: e.message }; } }。
• 在 useActionState 等异步 hooks 中始终使用 try-catch，以避免出现未处理的 promise。

图关系

• 与集群相关：web-dev（共享用于 Web 开发的工具）。
• 与以下标签相关：react（核心框架）、hooks（如 useState 等特定 API）、components（服务端/客户端类型）、web（整体领域）。
• 与其他技能的链接：可能会与“web-node”集成以处理后端 API，或与“data-fetching”集成以进行高级查询。