15 错误边界与使用技巧

最新推荐文章于 2025-03-22 20:49:57 发布

Stephy_Yy

最新推荐文章于 2025-03-22 20:49:57 发布

阅读量634

点赞数 1

分类专栏：系统学习 # react 文章标签： javascript react.js

本文链接：https://blog.youkuaiyun.com/weixin_43503511/article/details/120620909

版权

本文介绍了React16中的错误边界，一种防止组件UI因错误崩溃的功能。错误边界通过class组件捕获子组件在渲染、生命周期方法及构造函数中的错误。`getDerivedStateFromError`用于更新状态，而`componentDidCatch`用于处理错误并获取相关信息。虽然事件处理、异步代码等场景无法捕获，但错误边界可以向上冒泡。示例代码展示了错误边界的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

错误边界

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>
    )
}