必须先运行npx why-did-you-render --only-changes锁定真实触发源，再将标红组件路径、触发原因及react版本喂给codex，并强制其用/plan输出含四要素的最小改动方案，最后分两轮修复引用与封装子组件，验收盯紧日志渲染次数、paint flashing范围和devtools重绘数据。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你想让 Codex 帮你优化前端重复渲染问题，但一运行它就直接重写整个组件、删掉 shouldComponentUpdate、强行加 memo、甚至把 useEffect 逻辑全打散——结果页面闪动更严重，React DevTools 里 re-render 次数反而翻倍。这不是 Codex 不懂渲染原理，而是你没给它明确的“不许碰”的边界和可验证的观测点。
先锁定真实触发源，别让 Codex 盲猜
第一步：在终端执行 npx why-did-you-render --only-changes，等它输出带颜色标记的渲染日志。这一步必须做，因为 【Codex 无法凭空判断是 props 变化、state 更新还是 context 广播导致的重复渲染】，它看到的只是组件名和调用栈，而真实瓶颈往往藏在第3层子组件的某个未 memo 化的回调函数里。
第二步：把日志里标红的组件路径（如 src/components/ChartCard.tsx）和触发原因（如 “props changed: {data, theme}”）复制下来，连同当前 React 版本号（18.3.1）一起喂给 Codex。
第三步：明确告诉它：只分析这个文件，不读其他组件，不改任何 import，不碰 useReducer 和自定义 Hook 内部逻辑。Codex 默认会扫描整个 src，但你要它聚焦，就得切断它的“好心泛读”冲动。
用 /plan 强制它交出修改清单
输入指令：/plan 请基于 ChartCard.tsx 的当前代码和 why-did-you-render 日志，给出最小改动方案。
它必须回答清楚四件事：1. 哪些 props 是稳定引用但被频繁重建（比如内联对象）；2. 哪些子组件需要加 React.memo；3. 哪些 useCallback 必须包裹并指定 deps；4. 哪些地方绝对不能加 memo（比如带副作用的展示组件）。【如果它没列出第4条，说明它还没真正理解你的项目约束】。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
这一步卡住不放行，是因为我见过三次 Codex 把一个依赖 DOM 尺寸计算的 ResizeObserver 组件加了 memo，结果 resize 事件完全不触发——它只看“没变 props”，不看“DOM 状态变了”。
分两轮执行：先改引用，再封组件
方法一：修复不稳定引用（必须先做）
让它只处理 src/components/ChartCard.tsx 中所有内联对象/函数：
① 把 { data: props.data, theme: props.theme } 提到组件顶层 const 声明；
② 把 () => handleSelect(item) 全部替换成 useCallback((item) => handleSelect(item), [handleSelect])；
③ 删除所有 style={{ width: '100%' }} 这类无意义内联对象——React 会为每个渲染创建新对象引用。
方法二：封装子组件（仅限纯展示）
让它扫描文件中所有
验收必须盯住三个数字
改完后立刻跑：npx why-did-you-render --only-changes → 对比前后日志中同一组件的 “render count” 数值 → 打开 Chrome DevTools 的 Rendering 面板，勾选 “Paint flashing” 看红色闪烁区域是否收缩到预期 DOM 节点上。
只要这三个数字没同步下降，就说明 Codex 改错了位置。这时候不要让它继续修，直接用 /compact 清掉上下文，重新喂入原始日志和第一轮 diff 结果，再走 /plan 流程。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
