在describeNativeComponentFrame中,组件渲染故意失败,这样我们就可以从堆栈跟踪中收集一些警告的详细信息。Chrome开发工具会在每个警告上中断,有时会不止一次。在触发警告之前,我们的调用堆栈中有很多很多组件,会抛出很多假错误。这使得我们很难在出现警告时使用开发工具来调查不相关的错误。
React版本:17.0.1
1.创建一个简单的最小React页面。
1.呈现一个带有警告的简单“hello world”组件。
1.打开Chrome开发工具,点击break on all exceptions with catch exceptions,然后重新加载页面。
链接到代码示例:
https://github.com/markboyall/react-break-example的最大值
目前的行为是它在堆栈框架中每个组件中断一次,导致大量的假中断。预期的行为是React不会干扰浏览器开发工具,可以用来调试我们自己的代码。
以前版本的React最多只能在警告站点发出一个中断的警告,这是一个可以接受的折衷。
3条答案
按热度按时间ibrsph3r1#
这不是bug。这是这个特性的设计工作方式。“组件堆栈”在调试React中的错误和警告时 * 真的 * 很有帮助。生成它们的新方法不需要额外的“调试所有者”元数据,而我们过去必须将这些元数据与React应用程序捆绑在一起。
缺点是如果你启用了“捕获异常时暂停”,你可能会遇到很多断点。这也适用于Suspense API(因为它通过抛出承诺来工作)。
鉴于缺乏更好的替代方案,这是我们不可能改变的。
g6ll5ycj2#
我宁愿有额外的膨胀,也不愿开发工具不能正常工作。我们有没有可能有一个设置或东西来恢复到以前的行为?我很难想象“使关键的浏览器功能无用”可能永远不会是一个bug,但如果出于某种原因你不同意,这将是很好的选择。
pinkon5k3#
有没有可能我们可以有一个设置或东西来恢复到以前的行为?
不。我不认为这是我们会在设置背后暴露的类型。这是React如何生成其Dev警告的核心。