react如何接收异常
处理 React 中的异常
在 React 中捕获和处理异常可以通过多种方式实现，主要依赖于 JavaScript 的错误处理机制和 React 提供的特定功能。
使用 try-catch 捕获同步错误
对于同步代码中的错误，可以使用传统的 try-catch 语句来捕获异常。这种方法适用于组件生命周期方法、事件处理函数等同步执行的代码。
function MyComponent() {
const handleClick = () => {
try {
// 可能会抛出错误的代码
throw new Error('Something went wrong');
} catch (error) {
console.error('Caught an error:', error);
}
};
return <button onClick={handleClick}>Click me</button>;
}使用 Error Boundaries 捕获组件树错误
React 16 引入了 Error Boundaries 概念，专门用于捕获组件树中 JavaScript 错误，防止整个应用崩溃。Error Boundary 是一个类组件，定义了 static getDerivedStateFromError() 或 componentDidCatch() 生命周期方法。
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
console.error('Error caught by boundary:', error, errorInfo);
}
render() {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
// 使用方式
function App() {
return (
<ErrorBoundary>
<MyComponent />
</ErrorBoundary>
);
}处理异步错误
对于异步操作（如 Promise、async/await），需要使用 .catch() 方法或 try-catch 配合 async/await 来捕获错误。
// Promise 方式
fetchData()
.then(data => {
// 处理数据
})
.catch(error => {
console.error('Fetch error:', error);
});
// async/await 方式
async function loadData() {
try {
const data = await fetchData();
// 处理数据
} catch (error) {
console.error('Load error:', error);
}
}全局错误处理
可以设置全局错误处理器来捕获未被处理的异常，适用于整个应用程序。
// 捕获未处理的 Promise 拒绝
window.addEventListener('unhandledrejection', event => {
console.error('Unhandled rejection:', event.reason);
});
// 捕获未捕获的异常
window.addEventListener('error', event => {
console.error('Global error:', event.error);
});开发环境与生产环境的错误处理
在开发环境中，React 会显示详细的错误信息。在生产环境中，建议使用 Error Boundaries 并提供用户友好的错误界面，同时将错误日志发送到服务器进行监控。
componentDidCatch(error, errorInfo) {
// 生产环境中发送错误日志
if (process.env.NODE_ENV === 'production') {
sendErrorToServer(error, errorInfo);
}
}
