错误边界
React部分组件的错误不应该导致整个应用崩溃，为了解决这个问题，React16引入了错误边界
使用方法：
React组件在内部定义了getDerivedStateFromError或者componentDidCatch，它就是一个错误边界。getDerviedStateFromError和componentDidCatch的区别是前者展示降级UI，后者记录具体的错误信息，它只能用于class组件
import React from "react"
class ErrorBoundary extends React.Component{
constructor(props){
super(props)
this.state={
hasError:false
}
}
staic getDerivedStateFromError(){
return { hasError:true}
}
componentDidCatch(err,info){
console.error(err,info)
}
render(){
if(this.state.hasError){
return <div>Oops,err</div>
}
return this.props.children
}
}
// App.jsx
import React from "react"
import ErrorBoundary from "./components/ErrorBoundary"
import ComponentA from "./components/ComponentA"
export class App extends React.Component{
render(){
return (
<ErrorBoundary>
<ComponentA></ComponentA>
</ErrorBoundary>
)
}
}错误边界无法捕获自身的错误，也无法捕获事件处理、异步代码(setTimeout、requestAnimationFrame)、服务端渲染的错误。
网友回答文明上网理性发言 已有0人参与
发表评论: