错误边界

React16增加
防止某个组件的UI渲染错误导致整个应用崩溃
子组件发生JS错误，有备用的渲染UI
错误边界是组件，只能用class组件来写

错误边界组件捕获错误的时机

渲染时
生命周期函数中
组件树的构造函数中

getDerivedStateFromError

生命周期函数 static getDerivedStateFromError(error)
参数：子组件抛出的错误
返回值：新的state
渲染阶段调用
作用：不允许出现副作用（异步代码、操作dom等）

componentDidCatch

生命周期函数
组件原型上的方法
边界组件捕获异常，并进行后续处理
作用：错误信息获取，运行副作用
在组件抛出错误后调用
参数：error（抛出的错误）、info（组件引发错误相关的信息，即组件栈）

componentDidCatch(err, info) {console.log('componentDidCatch err', err)console.log('componentDidCatch info', info)
}

无法捕获的场景

1.事件处理函数（无法显示备用UI）

function Correct() {const handleClick = () => {console.log('点击')throw new Error('click throw err')}return (<div onClick={handleClick}>正常显示内容</div>)
}

<ErrorBoundary><Correct />
</ErrorBoundary>

2.异步 setTimeout、ajax

function Correct() {const err = () => {setTimeout(() => {throw new Error('抛出错误')}, 1000)}err()return (<div>正常显示内容</div>)
}

<ErrorBoundary><Correct />
</ErrorBoundary>

3.服务端渲染
4.错误边界组件（ErrorBoundary）内部有错误

class ErrorBoundary extends React.Component {state = {hasError: false,}static getDerivedStateFromError() {return {hasError: true}}render() {if (this.state.hasError) {return (<h1>This is Error UI{data}</h1>)}return this.props.children}
}

<ErrorBoundary><TestErr />
</ErrorBoundary>

以上几种情况有可能导致整个React组件被卸载

示例代码

class ErrorBoundary extends React.Component {state = {hasError: false,}static getDerivedStateFromError() {return {hasError: true}}render() {if (this.state.hasError) {return (<h1>This is Error UI</h1>)}return this.props.children}
}
function TestErr() {return (<h1>{data}</h1>)
}
function Correct() {return (<div>正常显示内容</div>)
}
function App() {return (<div><ErrorBoundary><TestErr /></ErrorBoundary><Correct /></div>)
}
ReactDOM.render(<App />,document.getElementById('app')
)

错误边界组件能向上冒泡

TestErr有错误，冒泡到 ErrorBoundary，ErrorBoundary自身也有错误
如果多个嵌套错误边界组件 → 则从最里层错误触发、向上冒泡触发捕获

<ErrorBoundary2><ErrorBoundary><TestErr /></ErrorBoundary>
</ErrorBoundary2>

在开发模式下，错误会冒泡至window，而生产模式下，错误不会冒泡，详见文档

class ErrorBoundary2 extends React.Component {constructor(props) {super(props)window.onerror = function (err) {console.log('window.onerror err', err)}}state = {hasError: false,}static getDerivedStateFromError(err) {return {hasError: true}}render() {if (this.state.hasError) {return (<h1>This is Error UI2</h1>)}return this.props.children}
}

15 错误边界与使用技巧相关推荐

经验丰富程序员才知道的15种高级Python小技巧
本文将介绍15个简洁的Python技巧,向着简洁更高效,学习易懂出发. 目录 1.通过多个键值将对象进行排序 2.数据类别 3.列表推导 4.检查对象的内存使用情况 5.查找最频繁出现的值 6.属性包 ...
[react] React v15中怎么处理错误边界？
[react] React v15中怎么处理错误边界? React 15 中有一个支持有限的错误边界方法 unstable_handleError.此方法不再起作用,同时自 React 16 beta ...
react 错误边界_React with GraphQL和错误边界中的自定义错误页面
react 错误边界 by Abi Noda 通过Abi Noda React with GraphQL和错误边界中的自定义错误页面 (Custom error pages in React with ...
reactjs错误边界：用来捕获后代组件的错误，渲染出备用页面
8. 错误边界理解: 错误边界(Error boundary):用来捕获后代组件错误,渲染出备用页面特点: 只能捕获后代组件生命周期产生的错误,不能捕获自己组件产生的错误和其他组件在合成事件.定时 ...
16 代码分割之错误边界与Suspense和命名导出
代码分割之错误边界与Suspense const Main = React.lazy(() => import('./main')) class ErrorBoundary extends Re ...
react跳转到网络异常页面_React错误边界处理
最近在项目编写过程中发现经常会因为接口问题抛出各种各的错误,有的时候页面甚至会直接白屏,非常影响用户体验.为此,我仔细研究了一下React处理异常的方案,下面我将开始我的分享. 错误边界的作用前端异 ...
React 高级应用 -- 错误边界 Error Boundaries
GitHub 学习 Demo. 部分 UI 的异常不应该破坏了整个应用.为了解决 React 用户的这一问题,React 16 引入了一种称为 "错误边界" 的新概念. 错误边界的 ...
java怎么定位error_程序遇到错误定位一些小技巧
程序遇到错误定位一些小技巧前言:作为一个后端开发在写程序的过程中遇到错误然后一点点查找修改是痛苦的事情,开始会想:"我擦,明明写的是正确的为什么会错啊",然后被虐了一遍又一遍的时 ...
《Excel 职场手册：260招菜鸟变达人》一第 4 招　身份证号码、银行卡号等超过15位数据的录入技巧...
本节书摘来异步社区<Excel 职场手册:260招菜鸟变达人>一书中的第1章,第4节,作者: 聂春霞 , 佛山小老鼠责编: 王峰松,更多章节内容可以访问云栖社区"异步社区&qu ...

15 错误边界与使用技巧

错误边界

错误边界组件捕获错误的时机

getDerivedStateFromError

componentDidCatch

无法捕获的场景

示例代码

错误边界组件能向上冒泡

15 错误边界与使用技巧相关推荐

最新文章

热门文章