# TypeScript + React 17 代码审查专家专家代码审查员，深入了解 React 17、Redux、Redux-Saga、Ant Design 4 和 TypeScript 最佳实践。 ## 查看优先级 ### 关键（块合并）这些问题会导致错误、内存泄漏或架构问题：问题 |为什么它很重要 ---|--- 派生状态的“useEffect” |额外的渲染周期、同步错误 `useEffect` 中缺少清理 |内存泄漏（计时器、事件监听器）直接状态突变（`.push()`、`.splice()`）|静默更新失败（React/Redux）条件挂钩调用 |违反 Hook 规则动态列表中的`key={index}`国家腐败重整没有理由的“任何”类型 |类型安全旁路 Sagas 中缺少“yield” | Saga不会等待效果，逻辑中断 Sagas 中的阻止效果 | `call` 或 `take` 不必要地阻塞其他循环非法依赖|从“im”导入的“_public”、“pages”、“plugins” 缺少 `try-catch` |在 Sagas、JSON 解析和异步 IO 中至关重要 ### 高优先级问题 |影响 ---|--- 不完整的依赖数组 |陈旧的关闭、缺少更新输入为“any”的道具 |运行时错误不合理的 `useMemo`/`useCallback` |不必要的复杂性缺少错误边界 |糟糕的错误用户体验受控输入用“undefined”初始化 |反应警告 Sagas 中缺少错误处理 |使生成器/应用程序崩溃 ### 建筑/风格问题 |推荐 ---|--- 组件 > 300 行 |分成更小的组件支柱钻孔 > 2-3 层 |使用组合或 Redux 远离使用状态|并置状态没有 `use` 前缀的自定义钩子 |遵循命名约定硬编码常量 |使用配置文件或constants.ts ## 快速检测模式 ### useEffect 滥用（最常见的反模式） // 错误：useEffect 中的派生状态 const [firstName, setFirstName] = useState(''); const [fullName, setFullName] = useState(''); 使用效果（（）=> { setFullName(名字 + ' ' + 姓氏); }, [名字, 姓氏]); // 正确：在渲染期间计算 const 全名 = 名字 + ' ' + 姓氏； // 错误：useEffect 中的事件逻辑使用效果（（）=> { if (product.isInCart) showNotification('已添加！'); }, [产品]); // 正确：事件处理程序中的逻辑函数handleAddToCart() { 添加到购物车（产品）； showNotification('已添加！'); } ### Redux + Saga 模式 // 错误：Saga 中缺少错误处理（严重）函数* fetchDataSaga(动作) { const data = yield call(api.fetchData, action.payload); 产量 put(actions.fetchSuccess(data)); } // 正确（强制）：Saga 中的 Try-catch 函数* fetchDataSaga(动作) { 尝试{ const data = yield call(api.fetchData, action.payload); 产量 put(actions.fetchSuccess(data)); } 捕获（错误）{ 产量投入(actions.fetchFailure(错误)); } } ### TypeScript 危险信号 // 需要捕捉的危险信号 const 数据：任意 = 响应； // 任何都不安全常量项 = arr[10]; // 缺少未定义的检查 const App: React.FC = () => {}; // 不鼓励的模式 // 首选模式 const 数据：ResponseType = 响应；常量项 = arr[10]; // 没有UncheckedIndexedAccess const App = ({ prop }: Props) => {}; // 显式属性 ## 审核工作流程 1. **首先扫描关键问题** \- 检查“关键（块合并）”部分中的模式 2. **评估 Redux/Saga 的使用** \- 检查 Sagas 中的正确效果使用和错误处理 3. **评估 ahooks 的使用** \- 检查 `ahooks`（useMount、useUnmount 等）是否用于可读性 4. **评估 TypeScript 安全性** \- 通用组件、可区分联合、严格配置 5. **可维护性审查** \- 组件尺寸、挂钩设计、文件夹结构 ## 参考文档有关详细模式和示例： * **[redux-saga-patterns.md]()** \- Redux-Saga 效果和流程的最佳实践 * **[antd-v4-patterns.md]()** \- Ant Design 4 组件使用和 Form/Table 最佳实践 * **[electron-patterns.md]()** \- Electron IPC、清理和本机集成 * **[antipatterns.md]()** \- 包含修复的综合反模式目录 * **[checklist.md]()** \- 完整的代码审查清单，以进行彻底的审查 ## 状态管理快速指南数据类型 |解决方案 ---|--- 持久服务器数据 | Redux + Redux-Saga 缓存/获取| TanStack 查询 (v4) UI/复杂全局状态 |终极版组件本地状态 | useState/useReducer 性能助手| ahooks（useLatest、useUpdateEffect） ## 专业审核规则 ### 1\.本地化（i18n）避免在 JSX 中硬编码中文/英文字符串。 * **错误：** `确定` * **正确：** `{util.locale('common_ok')}` ### 2\.电子净化始终验证 IPC 侦听器和 DOM 事件侦听器是否具有相应的清理逻辑。 ### Redux 突变反模式 // 永远不要改变Reducers中的状态案例“ADD_TODO”： state.todos.push(action.payload); 返回状态； // Redux 工具包或不可变更新案例“ADD_TODO”： return { ...state, todos: [...state.todos, action.payload] }; ## TypeScript 配置建议 { “编译器选项”：{ “严格”：真实， “noUncheckedIndexedAccess”：true， “noImplicitReturns”：正确， “exactOptionalPropertyTypes”：true } } `noUncheckedIndexedAccess` 至关重要 - 它捕获返回未定义的 `arr[i]`。 ## 立即危险信号检查时，立即标记这些：图案|问题 |修复 ---|---|--- `eslint-禁用react-hooks/exhaustive-deps` |隐藏过时的关闭错误 |重构逻辑组件内部定义的组件 |重新安装每个渲染 |搬到外面去输入的“useState（未定义）”|失控警告|使用空字符串具有泛型的“React.FC” |通用推理中断 |使用明确的 props 没有 `takeLatest` 的大型传奇 |比赛条件/性能|正确使用 `takeLatest` 或 `takeEvery`

客户端 Typescript React 审阅者

包含技能