菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
35
0

如何在浏览器中获取 Production Mode 的 React 实例

原创
05/13 14:22
阅读数 1446

https://github.com/LiuuY/Blog...

在 Production Mode 下,React 并没有暴露其实例。无论什么原因如果你要获取的话可以参考以下方法。

条件

步骤

知乎为例

  • 打开浏览器 Console,输入 __REACT_DEVTOOLS_GLOBAL_HOOK__,这是 React Developer Tools 暴露的全局变量。

image

  • __REACT_DEVTOOLS_GLOBAL_HOOK__ 的对象中包含了一个 renderers,找到其中其中的 findFiberByHostInstance 方法,右键,然后选择 Show function definition

image

  • 浏览器会跳到 Sources Tab 中,点击左下角 Pretty print。

image

  • findFiberByHostInstance 对应的文件就是 ReactDOM 所在的文件,然后在这个文件中搜索(ctrl + f) createElement 方法,这就是 React 本身包含的方法。在搜索结果中找到类似如下的位置,加断点。

image

  • 刷新浏览器,在浏览器断点暂停后,对应的例如上面的 a.a 就是 React 实例了,可以在 Console 中打印看看。如果没有断点暂停,说明代码并没有运行到,可以更换createElement 方法出现的位置加断点。

image

发表评论

0/200
35 点赞
0 评论
收藏