面试题：React中使用React Hooks实现错误边界，简述useEffect和try - catch在错误处理上的区别

Question

在React Hooks时代，我们可以用多种方式处理错误，比如在useEffect中处理副作用相关错误，也可以使用try - catch块。请简要阐述这两种方式在处理错误场景、错误捕获范围、对组件渲染的影响等方面有哪些区别。

Answer 1

处理错误场景

• useEffect：主要处理副作用相关错误，如网络请求、订阅解绑等在副作用操作时发生的错误。例如发起一个获取用户数据的网络请求，若请求失败可在useEffect中处理。
• try - catch：适用于任何可能抛出错误的代码块，不仅包括副作用，像函数内部复杂计算、数据转换等过程中出现的错误都能捕获。例如对获取到的数据进行复杂格式转换时，可使用try - catch捕获转换过程中的错误。

错误捕获范围

• useEffect：只能捕获该useEffect函数内部异步操作或同步代码执行过程中抛出的错误。不同useEffect之间的错误互不影响，无法捕获其他useEffect或者组件其他生命周期函数之外的错误。
• try - catch：可捕获包裹在try块内任意深度的代码错误，捕获范围取决于try - catch的包裹范围。可以跨函数、跨不同逻辑块捕获错误，只要这些代码在同一个try块内。

对组件渲染的影响

• useEffect：当useEffect中发生错误时，不会直接导致组件渲染中断。错误处理逻辑可以在副作用执行阶段处理错误，不会影响组件初始渲染以及后续状态更新渲染。但如果错误处理不当，可能导致副作用不能正常清理，影响组件性能和行为。
• try - catch：若在组件渲染函数主体或直接被渲染函数调用的函数中使用try - catch，捕获到错误不会使整个渲染过程崩溃。但如果try - catch没有正确处理错误，错误向上抛出，可能导致组件渲染异常中断，页面出现空白或显示错误提示信息，具体取决于应用的错误边界设置。