React 错误边界(Error Boundary)是什么?函数组件能做错误边界吗?
错误边界是捕获子组件渲染/生命周期抛出的错误、避免整棵应用崩溃的类组件,通过两个静态方法实现:
class ErrorBoundary extends React.Component {
state = { hasError: false }
static getDerivedStateFromError(err) { return { hasError: true } }
componentDidCatch(err, info) { logError(err, info) }
render() {
return this.state.hasError ? <Fallback /> : this.props.children
}
}关键点:
- 只能捕获渲染期错误,捕获不到事件回调、异步(
setTimeout/Promise)、SSR 中的错误 - 函数组件本身不能做错误边界(React 规定必须是类组件);但可以用社区库(如
react-error-boundary)的 Hook 简易封装 - 错误边界本身崩溃了就无能为力,所以建议分层包裹