react如何debugger
调试 React 应用的方法
使用浏览器开发者工具进行调试
React 开发者工具（React DevTools）是调试 React 应用的必备工具。安装 Chrome 或 Firefox 扩展后，可以在浏览器开发者工具中查看组件树、状态和 props。通过审查组件，可以实时修改 props 或 state 以测试不同场景。
在代码中插入 debugger 语句
在需要调试的代码位置插入 debugger 语句，浏览器会在执行到该行时自动暂停，进入调试模式。结合断点功能，可以逐步执行代码并检查变量值。这种方法适用于定位特定逻辑错误。
使用 console.log 输出调试信息
在关键代码位置添加 console.log，输出变量、props 或 state 的值。这是一种简单直接的调试方式，适合快速验证数据流或逻辑是否正确。对于复杂对象，可以使用 console.table 格式化输出。
启用严格模式（Strict Mode）
在 React 应用中启用严格模式可以帮助发现潜在问题。严格模式会检测不安全的生命周期方法、过时的 API 使用等。在应用根组件外包裹 <React.StrictMode> 即可启用。
高级调试技巧
使用错误边界（Error Boundaries）捕获异常
通过实现 componentDidCatch 生命周期方法的组件可以捕获子组件树的 JavaScript 异常。错误边界有助于隔离问题并防止整个应用崩溃，同时提供更友好的错误提示。
性能分析工具
React Profiler 可以记录组件渲染性能，帮助识别不必要的重新渲染。结合 Chrome 的性能面板，可以分析应用的整体性能瓶颈。
单元测试和快照测试
编写单元测试（如使用 Jest）和快照测试可以预防回归错误。测试框架提供的错误信息通常能快速定位问题根源。测试驱动开发（TDD）也能减少调试需求。
常见问题排查
检查 Hook 的使用规则
确保 Hook 只在 React 函数组件的顶层调用，不能在条件、循环或嵌套函数中使用。违反这些规则会导致难以追踪的错误。
验证 props 类型
使用 PropTypes 或 TypeScript 进行类型检查，可以在开发阶段捕获 props 类型不匹配的问题。类型系统能提供即时反馈，减少运行时错误。
网络请求调试
对于涉及 API 调用的组件，使用网络面板检查请求和响应。确保请求参数和返回数据符合预期，并处理可能的错误状态。
