Q15 · React / Vue 优化

@welldone-software/why-did-you-render 的原理是什么？

ReactWDYR调试工具

⚡ 速记答案（30 秒）

通过覆盖 React 的 createElement / Fiber 渲染流程，在组件更新前后对比 props / state
如果发现浅比较相等，却仍然重新渲染，就打印提示
支持在组件上加标记（如 whyDidYouRender = true）仅监控指定组件
本质上是一个开发期的渲染行为 diff/日志工具

📖 详细讲解

工作原理

1. 注入阶段

• 覆盖 React.createElement

• 拦截组件渲染调用

2. 对比阶段

• 记录上一次的 props 和 state

• 与当前值进行浅比较

• 如果相等却重渲染，说明有优化空间

3. 报告阶段

• 在控制台打印警告

• 显示哪些 props 未变化但触发了渲染

使用方式

1. 安装配置

在入口文件中引入并配置

2. 标记组件

给需要监控的组件添加静态属性

3. 查看报告

在控制台查看渲染警告

💻 代码示例

WDYR 配置与使用

// wdyr.ts - 在应用入口最前面引入
import React from 'react';

if (process.env.NODE_ENV === 'development') {
  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  whyDidYouRender(React, {
    trackAllPureComponents: true, // 追踪所有 Pure 组件
    trackHooks: true,             // 追踪 Hooks
    logOnDifferentValues: true,   // 值不同也记录
  });
}

// 在组件上标记
function MyComponent(props) {
  return <div>{props.value}</div>;
}
MyComponent.whyDidYouRender = true;

// 或者只追踪特定 Hooks
function useMyHook() {
  const [state, setState] = useState(0);
  // 会追踪这个 Hook 的更新原因
  return [state, setState];
}
useMyHook.whyDidYouRender = true;

💡

面试技巧：回答性能问题时，先说指标和标准，再讲优化手段，最后结合实际项目经验。