react框架如何调试

React 调试方法

使用 Chrome DevTools 和 React Developer Tools
安装 React Developer Tools 扩展后，可以在 Chrome DevTools 中查看组件树、状态和 props。组件会以层级结构展示，选中组件后可以实时查看和修改其状态。

利用浏览器控制台输出
在代码中使用 console.log、console.warn 或 console.error 输出变量或状态。结合断点调试（debugger 语句）可以暂停代码执行并检查当前作用域。

启用严格模式
在应用根组件包裹 <React.StrictMode>，React 会检测潜在问题（如不安全的生命周期方法）。虽然不会直接修复问题，但能帮助发现隐患。

错误边界（Error Boundaries）
通过定义 componentDidCatch 的组件捕获子组件树中的 JavaScript 错误，避免整个应用崩溃。示例代码：

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  componentDidCatch(error, info) {
    this.setState({ hasError: true });
    console.error(error, info);
  }
  render() {
    if (this.state.hasError) return <h1>Something went wrong.</h1>;
    return this.props.children;
  }
}

使用 VS Code 调试配置
在 VS Code 中配置 launch.json 以附加到 Chrome 调试进程：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Debug React App",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src"
    }
  ]
}

性能分析工具
React Profiler 集成在 React Developer Tools 中，可记录组件渲染时间。通过火焰图分析渲染性能瓶颈，优化不必要的重新渲染。