react 如何调试
调试 React 应用的常用方法
使用 Chrome DevTools 和 React Developer Tools
安装 React Developer Tools 扩展，可以在 Chrome 的开发者工具中查看组件树、状态（state/props）和钩子（hooks）的实时数据。通过 Components 和 Profiler 标签页可以检查组件的渲染性能和更新细节。
利用 console.log 和断点调试
在组件生命周期方法、钩子或事件处理函数中添加 console.log 输出关键变量。结合 Chrome DevTools 的 Sources 面板设置断点，逐步执行代码以定位问题。
function MyComponent() {
const [count, setCount] = useState(0);
console.log('Current count:', count); // 调试输出
return <button onClick={() => setCount(count + 1)}>Click</button>;
}错误边界（Error Boundaries）捕获组件错误
通过实现 componentDidCatch 的类组件包裹可能出错的子组件，避免整个应用崩溃并显示降级 UI。
class ErrorBoundary extends React.Component {
state = { hasError: false };
componentDidCatch(error, info) {
console.error('Error caught:', error, info);
this.setState({ hasError: true });
}
render() {
return this.state.hasError ? <FallbackUI /> : this.props.children;
}
}使用 useDebugValue 调试自定义钩子
在自定义钩子中使用 useDebugValue 可以在 React DevTools 中显示额外的调试信息。
function useCustomHook() {
const value = calculateValue();
useDebugValue(value, v => `Formatted: ${v}`);
return value;
}性能分析工具
React 的 Profiler API 或 DevTools 的 Profiler 标签页可以记录组件渲染时间，帮助优化性能瓶颈。
<React.Profiler id="MyApp" onRender={(id, phase, actualTime) => {
console.log(`Render time for ${id}: ${actualTime}ms`);
}}>
<MyApp />
</React.Profiler>单元测试与快照测试
使用 Jest 和 Testing Library 编写测试用例，验证组件行为。快照测试可以捕捉意外的 UI 变化。
import { render } from '@testing-library/react';
test('renders correctly', () => {
const { container } = render(<MyComponent />);
expect(container).toMatchSnapshot();
});
