React16中componentDidCatch与render内try/catch的核心差异？

这个问题问得特别好——我刚接触React 16的Error Boundary时也有过一模一样的疑惑！咱们来拆解一下你写的这个函数式try/catch组件和官方的componentDidCatch Error Boundary到底差在哪：

1. 错误捕获范围完全不在一个层级 #

你写的这个try/catch组件，只能捕获children在同步渲染那一瞬间抛出的错误。举个例子：如果子组件在componentDidMount里发起请求后报错、或者在setTimeout回调里抛错，这个try/catch根本碰不到这些错误——因为这些代码是在渲染完成后才执行的，try代码块早就执行完了。

而基于componentDidCatch的类组件Error Boundary，能捕获子组件树里所有渲染阶段的错误：

• 子组件render方法抛出的错误
• 子组件生命周期方法（比如componentDidUpdate、componentWillUnmount）里的错误
• React.lazy动态加载组件失败的错误

2. 不符合React官方的错误处理机制 #

React对Error Boundary有个硬性要求：必须是类组件。因为componentDidCatch是React专门为错误处理设计的生命周期钩子，React会主动把子组件树里的错误冒泡传递给最近的Error Boundary。

而你写的函数式组件，本质上只是在自己的render逻辑里加了个局部try/catch，React根本不把它当成“错误边界”。一旦子组件抛出的错误超出了这个try/catch的范围，React还是会直接崩溃整个组件树；而Error Boundary能让React知道“这里有错误处理，别把整个应用搞挂”，只会卸载出错的子组件树，保留应用的其他正常部分。

3. 错误状态的持久化管理能力 #

用componentDidCatch的Error Boundary可以通过state来持久化错误状态。比如捕获到错误后，我们可以执行this.setState({ hasError: true })，之后不管props怎么变化，只要hasError为true，就会一直显示错误UI，直到我们手动重置状态。

而你的函数式try/catch组件，每次渲染都会重新执行try块——如果后续props变化导致children能正常渲染了，它会立刻切回正常UI，但如果错误是持续性的，它也没办法记住之前的错误状态，除非手动加useState，但就算加了，也解决不了前面说的捕获范围问题。

4. 对异步渲染场景的支持 #

在React 16+的异步渲染模式下（比如用React.lazy加载组件），子组件的渲染可能是异步的。你的try/catch在return children的时候，异步渲染还没完成，后续抛出的错误根本不在try块的覆盖范围内。而Error Boundary能完美捕获这类异步渲染的错误，因为React会在异步渲染出错时主动通知最近的Error Boundary。

举个直观的例子 #

假设我们有一个会在生命周期里抛错的子组件：

class BadComponent extends React.Component {
  componentDidMount() {
    throw new Error("Oops, error in componentDidMount!");
  }
  render() {
    return <div>Hello</div>;
  }
}

• 用你的函数式try/catch组件包裹它：这个错误会直接导致整个应用崩溃
• 用带componentDidCatch的Error Boundary包裹：能成功捕获错误，显示自定义的错误UI，应用的其他部分正常运行

内容的提问来源于stack exchange，提问作者Kevin