## 无需手动记忆（必需） // ✅ React 编译器自动处理优化函数组件（{项目}）{ const 过滤 = items.filter(x => x.active); const Sorted = Filtered.sort((a, b) => a.name.localeCompare(b.name)); const handleClick = (id) => { 控制台.log(id); }; 返回 ; } // ❌从不：手动记忆 const Filtered = useMemo(() => items.filter(x => x.active), [items]); const handleClick = useCallback((id) => console.log(id), []); ## 进口（必需） // ✅ 始终：命名导入从“react”导入 { useState, useEffect, useRef }; // ❌从不从“反应”导入反应；从“react”导入* as React； ## 服务器组件优先 // ✅ 服务器组件（默认）- 无指令导出默认异步函数 Page() { const data = 等待 fetchData(); 返回 ; } // ✅ 客户端组件 - 仅在需要时 “使用客户端”；导出函数Interactive() { const [状态，setState] = useState(false); return ; } ## 何时使用“使用客户端” * useState、useEffect、useRef、useContext * 事件处理程序（onClick、onChange） * 浏览器API（窗口、本地存储） ## 使用() 钩子从“反应”导入{使用}； // 读取 Promise（暂停直到解决）函数注释({ 承诺 }) { const 注释 = use(promise); return comments.map(c =>

{c.text}

); } // 条件上下文（useContext 不可能！）函数主题({ 显示主题 }) { 如果（显示主题）{ const 主题 = use(ThemeContext); return

主题

; } 返回

纯文本

； } ## 动作和 useActionState “使用服务器”；异步函数submitForm（formData：FormData）{ 等待 saveToDatabase(formData); 重新验证路径（“/”）； } // 处于挂起状态从“react”导入{useActionState}；函数形式（）{ const [状态，操作，isPending] = useActionState(submitForm, null); 返回（ <表单动作={动作}> <按钮已禁用={isPending}> {正在等待？ “正在保存...”：“保存”} ）； } ## ref 作为 Prop（无forwardRef） // ✅ React 19：ref 只是一个 prop 函数输入({ ref, ...props }) { 返回 ; } // ❌ 老方法（现在不需要了） const 输入 =forwardRef((props, ref) => );

反应19

包含技能