# 现代前端开发模式 ## React 组件模式 ### 功能组件从 'react' 导入 { useState, useEffect }; 接口 CardProps { 标题：字符串；描述：字符串； imageUrl？：字符串； onClick?: () => void; } 导出 const Card = ({ 标题, 描述, imageUrl, onClick }: CardProps) => { 返回（

{图片网址 && ( {title}

)}

{标题}

{描述}

）； }; ### 带有子组件的组件接口 ContainerProps { 孩子：React.ReactNode；类名？：字符串； as?: keyof JSX.IntrinsicElements; } 导出常量容器 = ({ 孩子们，类名 = '', 如：组件 = 'div' }: ContainerProps) => { 返回（ <组件className={`容器${className}`}> {孩子} ）； }; ### 复合组件接口 AccordionContextType { 打开项目：字符串[]；切换：（id：字符串）=> void； } const AccordionContext = createContext(空); 导出 const Accordion = ({ 孩子 }: { 孩子: React.ReactNode }) => { const [openItems, setOpenItems] = useState([]); const 切换 = (id: 字符串) => { setOpenItems(上一个 => 上一个包含(id) ？ prev.filter(item => item !== id) ：[...上一个，id] ）； }; 返回（

{子项}

）； }; Accordion.Item = ({ id, 标题, 孩子 }: { id：字符串；标题：字符串；孩子：React.ReactNode； }) => { const context = useContext(AccordionContext); if (!context) throw new Error('Accordion.Item 必须在 Accordion 中使用'); const isOpen = context.openItems.includes(id); 返回（

<按钮类名=“手风琴__trigger” onClick={() => context.toggle(id)} aria-expanded={isOpen} > {标题} {已打开 && (

{children}

)}

）； }; ## 反应钩子 ### 使用状态 // 简单状态 const [count, setCount] = useState(0); // 对象状态 const [formData, setFormData] = useState({ 名称：''，电子邮件：''，消息：'' }); // 不可变地更新对象状态 const handleChange = (e: React.ChangeEvent) => { const { 名称，值 } = e.target; setFormData(prev => ({ ...prev, [名称]: 值 })); }; // 功能更新（当新状态依赖于先前状态时） setCount(上一个 => 上一个 + 1); ### 使用效果 // 仅在挂载时运行使用效果（（）=> { console.log('组件已安装'); return () => console.log('组件已卸载'); }, []); // 当依赖关系改变时运行使用效果（（）=> { fetchData(用户ID); }, [用户ID]); // 清理模式使用效果（（）=> { const 控制器 = new AbortController(); fetch('/api/data', { 信号:controller.signal }) .then(res => res.json()) .then(setData); return() =>controller.abort(); }, []); ### useMemo 和 useCallback // 记住昂贵的计算 const SortedItems = useMemo(() => { return items.sort((a, b) => a.name.localeCompare(b.name)); }, [项目]); // 记忆子组件的回调 const handleClick = useCallback((id: string) => { setSelectedId(id); }, []); // 传递给优化的子进程 <列表项目={items} onItemClick={handleClick} /> ### 自定义挂钩 // 使用本地存储函数 useLocalStorage(键：字符串，初始值：T) { const [storedValue, setStoredValue] = useState(() => { if (typeof window === '未定义') 返回initialValue; 尝试{ const item = window.localStorage.getItem(key); 退货？ JSON.parse(item) : 初始值; } 抓住 { 返回初始值； } }); const setValue = (值: T | ((val: T) => T)) => { const valueToStore = 函数的实例值？值（存储值）：值； setStoredValue(valueToStore); window.localStorage.setItem(key, JSON.stringify(valueToStore)); }; 将 [storedValue, setValue] 返回为 const； } // 使用去抖函数 useDebounce(值: T, 延迟: 数字): T { const [debouncedValue, setDebouncedValue] = useState(值); 使用效果（（）=> { const 计时器 = setTimeout(() => setDebouncedValue(value), 延迟); 返回（）=>清除超时（计时器）； }, [值, 延迟]); 返回去抖值； } // 使用Fetch 函数 useFetch(url: string) { const [数据，setData] = useState(空); const [正在加载，setLoading] = useState(true); const [错误，setError] = useState<错误 |空>(空); 使用效果（（）=> { const 控制器 = new AbortController(); 设置加载（真）； fetch(url, { 信号:controller.signal }) .then(res => { if (!res.ok) throw new Error(`HTTP ${res.status}`); 返回 res.json(); }) .then(设置数据) .catch(错误=> { if (err.name !== 'AbortError') setError(err); }) .finally(() => setLoading(false)); return() =>controller.abort(); }, [网址]); 返回{数据，加载，错误}； } ## Next.js 模式 ### 页面组件（应用程序路由器） // 应用程序/产品/page.tsx 从'@/lib/api'导入{getProducts}；导出默认异步函数 ProductsPage() { const 产品 = 等待 getProducts(); 返回（ <主要>

产品

）； } // 元数据导出常量元数据 = { 标题：“产品”，描述：“浏览我们的产品目录”， }; ### 动态路由 // 应用程序/产品/[slug]/page.tsx 从 '@/lib/api' 导入 { getProduct, getProducts }; 从 'next/navigation' 导入 { notFound }；接口 PageProps { 参数：{ slug：字符串}； } 导出默认异步函数 ProductPage({ params }: PageProps) { const 产品 = 等待 getProduct(params.slug); 如果（！产品）{ 未找到（）； } 返回 ; } // 在构建时生成静态参数导出异步函数generateStaticParams() { const 产品 = 等待 getProducts(); return products.map(product => ({ slug: Product.slug })); } // 动态元数据导出异步函数generateMetadata({ params }: PageProps) { const 产品 = 等待 getProduct(params.slug); 返回{ 标题：产品？.名称？？ “未找到产品”，描述：产品？.描述， }; } ### 服务器与客户端组件 // 服务器组件（默认）-可以直接获取数据 // 应用程序/组件/ProductList.tsx 从'@/lib/api'导入{getProducts}；导出异步函数 ProductList() { const 产品 = 等待 getProducts(); // 直接获取数据返回（

{product.name}

）； } // 客户端组件 - 用于交互 // 应用程序/组件/AddToCartButton.tsx '使用客户端'；从'react'导入{useState}；导出函数 AddToCartButton({ 产品Id }: { 产品Id: 字符串 }) { const [isLoading, setIsLoading] = useState(false); const handleClick = async () => { setIsLoading(true); 等待 addToCart(productId); setIsLoading(假); }; 返回（ <按钮 onClick={handleClick} 禁用={isLoading}> {正在加载？ '添加...' : '添加到购物车'} ）； } ### API 路由 // 应用程序/api/产品/route.ts 从 'next/server' 导入 { NextRequest, NextResponse }; 导出异步函数 GET(请求: NextRequest) { const searchParams = request.nextUrl.searchParams; const 类别 = searchParams.get('类别'); const 产品 = 等待 db.products.findMany({ 其中：类别？ {类别}：未定义， }); 返回 NextResponse.json(产品); } 导出异步函数 POST(request: NextRequest) { const body =等待request.json(); const 产品 = 等待 db.products.create({ 数据：身体， }); 返回 NextResponse.json(产品, { 状态: 201 }); } ## Vue.js 模式 ### 组合 API <脚本设置lang =“ts”> 从'vue'导入{ref，计算，onMounted}；接口产品{ id：字符串；名称：字符串；价格：数量； } const 道具 = DefineProps<{ 初始产品：产品[]； }>(); 常量发射=定义发射<{ (e: '选择', 产品: 产品): void; }>(); const products = ref(props.initialProducts); const searchQuery = ref(''); 常量过滤产品=计算（（）=> { 返回产品.value.filter(p => p.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ）； }); const handleSelect = (产品: 产品) => { 发出（'选择'，产品）； }; 已安装（（）=> { console.log('组件已安装'); }); <模板>

<李 v-for="filteredProducts 中的产品" :key="产品.id" @click="handleSelect(产品)" > {{ 产品名称 }} - ${{ 产品价格 }}

### 可组合项 // 可组合项/useProducts.ts 从 'vue' 导入 { ref, onMounted }; 导出函数 useProducts() { const 产品 = ref([]); 常量加载 = ref(true); 常量错误 = ref<错误 |空>(空); const fetchProducts = async () => { 加载.值= true; 尝试{ const 响应=await fetch('/api/products'); products.value = 等待response.json(); } 捕获 (e) { error.value = e 作为错误； }最后{ 加载.值=假; } }; onMounted(fetchProducts); 返回{ 产品，正在加载，错误，重新获取：获取产品， }; } ## TypeScript 模式 ### 接口与类型 // 接口 - 可扩展，适合对象界面用户{ id：字符串；名称：字符串；电子邮件：字符串； } 接口 Admin 扩展 User { 角色：“管理员”；权限：字符串[]； } // 类型 - 用于并集、交集、基元类型状态 = '待处理' | '活跃' | '完全的'; 类型 ID = 字符串 |数字; 类型 UserWithStatus = 用户 & { 状态: 状态 }; ### 泛型 // 泛型函数函数 getFirst(items: T[]): T |未定义{ 返回项目[0]； } // 通用接口接口 ApiResponse { 数据：T；状态：数量；消息：字符串； } // 通用组件道具接口 ListProps { 项目：T[]； renderItem: (项目: T) => React.ReactNode; keyExtractor: (项目: T) => 字符串; } 函数 List({ items, renderItem, keyExtractor }: ListProps) { 返回（

{renderItem(item)}

）； } ### 实用程序类型 // Pick - 选择特定属性类型 UserPreview = Pick<用户, 'id' | '名字'>; // 省略 - 排除属性输入 UserWithoutEmail = Omit<用户，'电子邮件'>; // 部分 - 使所有属性可选类型 UserUpdate = Partial<用户>; // 必需 - 使所有属性成为必需类型必需用户 = 必需<用户>; // 记录 - 具有特定键/值类型的对象类型 UserMap = Record<字符串，用户>; // Readonly - 使所有属性只读类型 ImmutableUser = Readonly<用户>; ## 现代 CSS ### CSS 模块 // 样式/Button.module.css .按钮{ 填充：0.5rem 1rem；边框半径：4px； } .primary { 背景：var(--color-primary); 颜色: 白色; } .次要{ 背景：透明；边框：1px 实心 var(--color-primary); } // 按钮.tsx 从'./Button.module.css'导入样式；导出常量按钮 = ({ 变体 = '主要', 孩子 }) => ( <按钮类名={`${styles.button} ${styles[variant]}`}> {孩子} ）； ### 顺风 CSS // 实用类导出 const Card = ({ 标题, 儿童 }) => (

{标题}

{子项}

）； // 在CSS中使用@apply /* 样式.css */ .btn { @apply px-4 py-2 圆角字体中过渡颜色； } .btn-primary { @apply bg-blue-600 文本白色悬停：bg-blue-700； } ### CSS 变量：根{ /* 颜色 */ --颜色主色：#0066cc； --颜色-原色-深色：#004999； --颜色次要：#6c757d； /* 版式 */ --font-family-base: 'Inter', sans-serif; --字体大小基础：1rem； /* 间距 */ --间距-xs: 0.25rem; --spacing-sm: 0.5rem; --间距-md: 1rem; --间距-lg: 2rem; /* 阴影 */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); } /* 深色模式 */ @media（首选颜色方案：深色）{ ：根{ --颜色主色：#4da6ff； --颜色背景：#1a1a1a； --颜色文本：#ffffff； } } ## 状态管理 ### 反应上下文 // 上下文/ThemeContext.tsx 接口 ThemeContextType { 主题：“光”| '黑暗的'; 切换主题：() => void; } const ThemeContext = createContext(空); 导出函数 ThemeProvider({ 孩子 }: { 孩子: React.ReactNode }) { const [主题，setTheme] = useState<'light' | '暗'>('光'); const 切换主题 = () => { setTheme(prev => prev === 'light' ? 'dark' : 'light'); }; 返回（ {孩子} ）； } 导出函数 useTheme() { const context = useContext(ThemeContext); if (!context) throw new Error('useTheme 必须在 ThemeProvider 中使用'); 返回上下文； } ### Zustand（轻量级状态）从“zustand”导入{创建}；接口购物车状态{ 项目：购物车项目[]； addItem: (项目: CartItem) => void; 删除项目：（id：字符串）=>无效；清除购物车：（）=>无效；总数：() => 数量； } 导出 const useCart = create((set, get) => ({ 项目：[]， addItem: (项目) => 设置((状态) => ({ 项目：[...状态.项目，项目] }）），删除项目：（id）=>设置（（状态）=>（{ items: state.items.filter(item => item.id !== id) }））， clearCart: () => set({ items: [] }), 总计： () => get().items.reduce((sum, item) => sum + item.price, 0), })); ## 数据获取 ### React 查询/TanStack 查询从 '@tanstack/react-query' 导入 { useQuery, useMutation, useQueryClient }; // 获取查询函数 useProducts() { 返回 useQuery({ 查询键：['产品']， queryFn: () => fetch('/api/products').then(res => res.json()), staleTime: 5 * 60 * 1000, // 5 分钟 }); } // 缓存失效的突变函数 useCreateProduct() { const queryClient = useQueryClient(); 返回 useMutation({ 突变Fn：（新产品：CreateProductInput）=> fetch('/api/产品', { 方法：'POST'，正文：JSON.stringify(newProduct), }).then(res => res.json()), 成功：() => { queryClient.invalidateQueries({ queryKey: ['产品'] }); }, }); } ### 驻波比从 'swr' 导入 useSWR； const fetcher = (url: string) => fetch(url).then(res => res.json()); 函数 useProducts() { const { 数据，错误，isLoading，变异 } = useSWR('/api/products', fetcher, { 重新验证焦点：正确，刷新间隔：30000， }); 返回{ 产品：数据、正在加载， isError：错误，刷新：变异， }; } ## 错误处理 ### 错误边界 '使用客户端'；从 'react' 导入 { Component, ReactNode }; 接口道具 { 孩子们：ReactNode；后备？：ReactNode； } 接口状态{ 有错误：布尔值；错误？：错误； } 导出类 ErrorBoundary 扩展 Component { 状态: 状态 = { hasError: false }; 静态 getDerivedStateFromError(错误：错误): 状态 { 返回 { hasError: true, 错误 }; } componentDidCatch(错误：错误，errorInfo：React.ErrorInfo) { console.error('错误捕获：', error, errorInfo); // 发送到错误跟踪服务 } 渲染（）{ if (this.state.hasError) { 返回 this.props.fallback || （

出了点问题

）； } 返回 this.props.children; } } ### 异步错误处理 // 使用 try-catch 异步函数 fetchData() { 尝试{ const 响应 =等待 fetch('/api/data'); 如果（！response.ok）{ 抛出新错误(`HTTP ${response.status}`); } 返回等待响应.json(); } 捕获（错误）{ if (错误实例错误) { console.error('获取失败：', error.message); } 抛出错误； } } // 结果模式类型结果 = | { 成功：真实；数据：T} | { 成功：假；错误：E}；异步函数 safeFetch(url: string): Promise> { 尝试{ const 响应 = 等待 fetch(url); 如果（！response.ok）{ return { success: false, error: new Error(`HTTP ${response.status}`) }; } const data =等待response.json(); 返回{成功：true，数据}； } 捕获（错误）{ 返回 { 成功：错误，错误：错误为错误 }; } }

现代前端

包含技能