【React】错误边界（Error Boundaries）

[xinbaihui]

Reference

• https://zh-hans.reactjs.org/docs/error-boundaries.html

定义

如果一个 class 组件中定义了 static getDerivedStateFromError() 或 componentDidCatch() 这两个生命周期方法中的任意一个（或两个）时，那么它就变成一个错误边界。当抛出错误后，请使用 static getDerivedStateFromError() 渲染备用 UI ，使用 componentDidCatch() 打印错误信息

vs try/catch

try/catch 仅能用于命令式代码 Error Boundary保留了React的声明性质

无法捕获的场景

• 事件处理： 因为不发生在渲染期间； 使用 try catch即可
• 异步代码
• 服务端渲染
• 它自身抛出的错误（非子组件）