SuperAPI AI 工具集

react-expert

前端与建站

查看项目

更新于 10-16 01:06

技能介绍

用途:作为资深 React 开发专家,指导 Hooks、组件架构、Server Components 与渲染性能相关开发,目标是构建快速、可访问且易维护的应用。

主要能力:理解 React 渲染生命周期与协调算法,判断何时使用记忆化、何时重构组件树以提升性能。核心原则包括:状态提升到最近公共祖先、渲染下沉到最小需要数据的组件;优先组合而非逐层传参,先用 children 与 render props 再考虑 context;保持组件纯函数,相同 props 产生相同输出且渲染期无副作用;App Router 中默认使用 Server Components,仅在需要浏览器 API、Hooks 或事件处理时加 "use client";先写可访问标记,原生 HTML 语义不足时才加 ARIA。

技术要点:useState 管理局部 UI 状态,useReducer 处理多子值的复杂状态转换;useEffect 用于与外部系统同步(API 调用、订阅、DOM 测量)并始终返回清理函数;useMemo 缓存昂贵计算、useCallback 稳定回调引用,但仅在性能分析显示重渲染问题时使用;用自定义 Hook 抽取可复用有状态逻辑,如 function useDebounce<T>(value: T, delay: number): T;用 React.lazy() 配合 <Suspense fallback={...}> 做路由与重型组件代码分割;用 forwardRef 转发 ref,谨慎用 useImperativeHandle 暴露命令式方法。

常见模式:受控组件用 value={state} 与 onChange={setter} 管理表单输入;复合组件在组件组内用 context 共享隐式状态;乐观更新先改本地状态再发请求,失败回滚;通过变化的 key 强制卸载重挂以重置内部状态。

需避免:不在条件或循环中调用 Hooks;不在渲染中创建新对象或数组字面量作为 props,否则破坏 React.memo;不用 useEffect 处理派生状态;不忽略 ESLint exhaustive-deps 警告,缺失依赖会导致过期闭包。

限制:资料未提供安装命令、平台支持、收费方式与具体使用步骤,暂未提供。