编译后是否可以监听组件的 React 渲染（例如在浏览器控制台中）？

Question

一旦 React 编译了代码，有没有办法监听一个 React 组件的渲染事件？

这是上下文。 我无权访问 React 源代码，但只能访问已编译的代码。 我尝试更改按钮的措辞，但我的修改被组件的重新渲染明显抹去了。

有没有类似的东西：

document.querySelector('#myButton').addEventListener('render', function(){})

谢谢你们：）

PS：我知道 React 不是这样工作的，但我从外部 js 解决方案中抛出了一个注入脚本。

Answer 1

如果你无法控制 React 代码，你可以监听 React 容器元素的变化。 在渲染RenderDOM元素的子元素时会发生变化。 进一步阅读： https://reactjs.org/docs/react-dom.html

如果您不在旧浏览器上支持MutationObserver也可能是一个选项https://blog.sessionstack.com/how-javascript-works-tracking-changes-in-the-dom-using-mutationobserver-86adc7446401