react-scan的用法

在本地运行 follow 的源代码的时候是我第一次接触到 react-scan, 后来又在 x 的首页山上面刷到了原作者以及其他人对于 react-scan 的推荐。

下面来介绍一下它的用法，以及我个人认为它好用的原因。

安装

安装方式可以分为两种，开发环境安装，使用浏览器插件。官方文档有比较详细的教程，这里不做赘述。

如果通过 npm 安装，可以自定义更多的配置，可以参考这里的 API Reference

使用

react-scan 有三个按钮

是否查看元素的开关
是否查看 re-render 的开关
是否开启声音的开关

开启元素查看

会在面板上显示当前的元素，以及它的 props,context,state。

如果发生变化，会变为紫色，这样可以方便你排查是什么值的变化导致了 re-render。

在某些元素的 props 中会显示一个⚠️警告标志（isBadRender），提醒开发者这里可能存在性能优化的空间

const isBadRender =
    isChanged &&
    ['object', 'function'].includes(typeof lastValue) &&
    fastSerialize(lastValue) === fastSerialize(contextObj[key]);

为什么情况下会出现：

组件发生了重新渲染（isChanged 为 true）
变化的值是对象或函数类型（[‘object’, ‘function’].includes(typeof lastValue)）
但是当我们序列化新旧值时，它们是完全相同的（fastSerialize(lastValue) === fastSerialize(contextObj[key])）

开启 re-render 查看

会显示当前的 re-render 的次数，以及每个 re-render 的组件。

为什么觉得好用

虽然 devtool 也可以查看 re-render 的情况，但是 react-scan 把 component 的 props,context,state 都显示出来并且标记了 bad render,让问题的排查更加方便。

并且 react-scan 自带面板，不需要像 devtool 一样首先需要打开 devtool 再勾选上 re-render 的画面闪烁监听。

参考

还有这种前端技巧？REACT-SCAN 代码鉴赏｜精简版_哔哩哔哩_bilibili

摘要（由ai生成）

安装

使用

开启元素查看

开启 re-render 查看

为什么觉得好用

参考