Reactjs 如何在功能组件中使用错误边界？

我可以通过实现

componentDidCatch

来做出反应

有没有一种干净的方法可以使功能组件成为错误边界而不转换为类

---

或者这是一种代码味道？

从v16.2.0开始，无法将功能组件变成错误边界

，尽管您可以根据自己的意愿多次重复使用：

componentDidCatch（）

方法的工作原理类似于JavaScript

catch{}

块，但用于组件只有类组件可以作为错误边界。实际上，大多数情况下，您需要声明一次错误边界组件，并在整个应用程序中使用它。

还要记住，

try/catch

块并不是在所有情况下都有效。

---

如果层次结构深处的组件尝试更新但失败，父对象之一中的

try/catch

块不起作用，因为它不一定与子对象一起更新。

有一个实现，可以处理功能组件不存在的功能，例如

componentDidCatch

和

deriveStateFromError

根据作者的说法，它基于React.memo（）

建议的解决方案深受新React.memo（）API的启发

从“/functional error boundary”导入捕获
类型道具={
子项：React.ReactNode
}
const MyErrorBoundary=Catch（函数MyErrorBoundary（props:props，error？：error）{
如果（错误）{
返回(
发生了一个错误
{error.message}
)
}否则{
返回{props.children}
}
})

---

参考和API官方React团队未为功能组件提供错误边界支持。 利用npm软件包可以实现功能部件的误差边界。

---

因此，

componentDidCatch

可能被认为是React生命周期挂钩的一部分，这在简单的功能组件中是不可用的。我认为你可以做类似的事情的唯一方法就是把你的整个函数体包装在一个块中…关于Alexander的注释：错误边界和try/catch之间有区别：当你写。。。Comp尚未呈现，表达式仅构造JSX树。执行try{}catch{…}不会捕获任何Comp呈现错误，因为现在没有呈现，react版本是

17.01

，而且他们说

只有类组件可以作为错误边界