ReactJS ::错误边界
无论项目的组合情况如何,错误仍然会找到解决方法。这些错误可能会在非常特殊的情况下发生,难以诊断并使应用程序处于不稳定状态,这对于用户和开发人员而言都是绝对的噩梦。
Reactv16于2017年9月发布。作为该更新的一部分,任何未处理的错误现在都将卸载整个应用程序。为了解决这个问题,引入了错误边界的概念。当组件内发生错误时,它将在其父级中冒出气泡,直到它到达要卸载的应用程序的根目录,或者找到了要处理该错误的组件。错误边界的概念是一个通用组件,负责为其子级处理错误。
componentDidCatch(error, info) { this.setState({ error:error.message}); } render() { return this.state.error ?: this.props.children; }
通过使用新的生命周期方法,可以将错误存储在状态中并替换子内容。这有效地将应用程序的此分支与其他分支隔离开来。
边界像try/catch块一样工作。它们可以彼此嵌套在一起而不会出现问题,但是它们内部发生的任何错误都将被下一个边界捕获。最好将它们保持尽可能简单。