react-scan：集调试与性能优化于一身，助力 React 项目完美蜕变

微信搜索“好朋友乐平”关注公众号。

---

一款能够自动检测和突出显示 React 应用中导致性能问题的组件的工具——React Scan。

背景

在 React 开发过程中，性能问题是开发者经常需要面对的挑战。虽然已经有一些工具可用于性能调试，但这些工具在实际使用中存在各种局限性，无法很好地满足开发者的需求。

1. <Profiler /> 的问题
   • 需要大量手动更改：使用 <Profiler /> 时，开发者需要对代码进行大量的手动修改，这增加了开发的复杂性和工作量。例如，需要在代码中合适的位置插入 <Profiler /> 组件，并且要处理其相关的回调函数等。

<Profiler id="App" onRender={onRender}>
  <App />
</Profiler>;

function onRender(
  id,
  phase,
  actualDuration,
  baseDuration,
  startTime,
  commitTime
) {
  // 对渲染时间进行汇总或记录...
}

2. Why Did You Render? 的问题
   • 缺乏简单视觉线索：Why Did You Render? 这个工具在帮助开发者理解组件为何重新渲染方面，缺少简单直观的视觉提示。开发者可能需要花费更多的时间去分析日志或调试信息，才能找出性能问题的根源。

import React from 'react';

if (process.env.NODE_ENV === 'development') {
  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  whyDidYouRender(React, {
    trackAllPureComponents: true,
  });
}

//...
const BigListPureComponent = props => (
  <div>
    //some heavy component you want to ensure doesn't happen if its not necessary
  </div>
)
BigListPureComponent.whyDidYouRender = true

3. React Devtools 的问题

• 缺乏简单、便携和编程式 API：React Devtools 没有提供一个简单、可移植且可编程的 API，这使得开发者在进行自动化性能测试或集成到特定工作流程中时遇到困难。
• 渲染批次处理导致延迟：React Devtools 会对渲染进行批次处理，当组件渲染速度过快时，它会出现延迟，可能每秒只显示一次渲染结果，这不利于开发者实时观察组件的渲染情况。
• 滚动或调整大小时框位置不更新：在使用