React，如何知道何时渲染了纯函数组件？

Posted 2023-04-12

【中文标题】React，如何知道何时渲染了纯函数组件？

【英文标题】：React, how to know when a pure function component has been rendered?

【发布时间】：2019-02-20 09:30:13

【问题描述】：

我正在编写一个库来记录组件何时重新渲染，所以我需要检测它。

我可以通过猴子补丁React.Component.prototype.componentDidUpdate 为扩展React.Component 的组件执行此操作，但是如何检测纯函数组件何时呈现？这甚至可能吗？

【参考方案1】：

由于函数组件不使用继承和生命周期钩子，因此无法在不修改组件源代码的情况下对其进行修补。

可以使用 React 开发工具使用的 API 来访问 React 渲染器，将钩子分配给 __REACT_DEVTOOLS_GLOBAL_HOOK__，然后它会被 React 渲染器捕获。一个很好的例子是react-render-hook。它本身不提供所需的功能，但可以根据要求进行修改，特别是this line。