请说明在 React 项目中捕获错误与处理错误的常用方法和机制,并谈谈它们各自的适用场景。
考察说明
考查对 React 错误处理机制(尤其是错误边界)的理解及实际应用能力。
回答思路
- 【回答框架 1】React 错误处理主要分两类:渲染/生命周期错误和事件处理器中的错误。渲染错误可用错误边界捕获,事件处理器错误需自行 try/catch。
- 【回答框架 2】错误边界是类组件中实现 componentDidCatch 或 static getDerivedStateFromError 的组件,可捕获子树中的渲染错误、生命周期方法错误和构造函数错误,但不能捕获自身错误、异步错误、事件处理器错误和服务端渲染错误。
- 【回答框架 3】对于事件处理器和异步代码,使用 try/catch 捕获错误,并可上报错误监控系统。对于异步请求,可结合 Promise 的 catch 或 async/await 处理。
- 【回答框架 4】错误边界需要提供降级 UI,如显示错误提示或重试按钮,同时可记录错误信息上报。React 16 之后推荐使用错误边界,但没有提供内置组件,需自行封装。
- 【关键点 1】错误边界只能捕获渲染、生命周期和构造函数中的错误。
- 【关键点 2】事件处理器和异步错误需用 try/catch 或 Promise 处理。
- 【关键点 3】错误边界可降级 UI 并记录错误。
- 【易错点 1】错误边界无法捕获自身错误和异步错误。
- 【易错点 2】不要把错误边界用于事件处理器,它不生效。