面试题：React中如何使用Chrome DevTools调试Props和State

Question

请描述在React项目中，如何借助Chrome DevTools这一工具对组件的Props和State进行调试？包括如何打开相关调试面板，以及如何查看和分析Props与State的数据变化。

Answer 1

1. 打开Chrome DevTools：
   • 在Chrome浏览器中打开React项目页面。
   • 右键点击页面元素，选择“检查”，或者使用快捷键Ctrl + Shift + I（Windows/Linux）或Command + Option + I（Mac），即可打开Chrome DevTools。
2. 查看组件Props和State：
   • Elements面板：
     • 在Elements面板中，找到你要调试的React组件对应的DOM元素。展开该元素，在右侧的属性面板中，如果该组件是React组件，会有一个__reactFiber$xxx属性（xxx为随机字符）。
     • 点击__reactFiber$xxx属性，在展开的对象中，可以找到memoizedProps，这里存储着该组件当前的Props值。
   • React面板（如果安装了React DevTools扩展）：
     • 确保已安装React DevTools扩展，若未安装，可在Chrome应用商店搜索安装。
     • 打开Chrome DevTools后，会出现一个React标签页。
     • 在React面板中，左侧树形结构展示了组件树，点击你要调试的组件，右侧面板会显示该组件的Props和State。Props会以属性名 - 属性值的形式清晰列出；State也会以类似结构展示，便于查看当前状态值。
3. 分析Props与State的数据变化：
   • 使用断点：
     • 在React面板中，对于你感兴趣的组件，在组件节点上右键点击，选择“Break on...”，有“Props changes”“State changes”“Hooks changes”等选项。
     • 例如选择“Props changes”，当该组件的Props发生变化时，Chrome DevTools会暂停在相关代码位置，此时你可以在Sources面板中查看调用栈，分析是什么导致了Props的变化。对于State变化同理，选择“State changes”，可以分析State变化的原因。
   • 性能面板辅助分析：
     • 打开Performance面板，点击录制按钮，然后在React应用中进行操作（触发Props或State变化的操作），操作完成后停止录制。
     • 在性能记录中，找到与React相关的事件（如React - render等），查看这些事件的时间线和相关数据。可以分析出Props或State变化对组件渲染性能的影响，以及在什么时间点发生了重要的数据变化。