logo
Zhanxin
Published on

深入 ReactJS:定位重新渲染组件的技巧

Authors

对于 ReactJS 开发人员而言,一项关键任务就是找出在 ReactJS 应用程序中哪些组件在不断地重新渲染。这样做可以有效防止网站出现内存泄漏和性能问题。

如何找到 ReactJS 中重新渲染的组件?

首先,你需要在浏览器中安装React 开发工具。安装完成后,打开开发工具,进入 components 选项卡,点击 settings 图标。

单击 dev 工具上的设置图标

接着,在开发工具的 general setting 选项卡中启用 Highlight updates when components render(组件渲染时突出显示更新)

启用 Highlight updates when components are rendered in the Chrome dev tool

此时,你会看到边框,它能明确告诉你在 ReactJS 网站上哪个组件正在被重新渲染。需要注意的是,如果不打开开发人员工具,在网站上是看不到任何边框提示的。

检查重新渲染的组件

找出组件重新渲染的原因

仅仅知道哪个组件在重新渲染还不够,我们还需要了解组件重新渲染的原因。要做到这一点,可以转到 settings 中的 “profiler”,并启用 “Record why each component rendered (记录每个组件渲染的原因)” 选项。

启用 “Record why each component rendered” 选项

现在,你就可以使用 Profile 工具来了解组件在 React 应用程序中重新渲染的具体原因了。

Profile