actjs新特征介绍版本16概念用于处理UI错误版本16前没有概念处理这类问题,我们使用尝试.抓取.处理

出错时全程序崩溃,浏览器显示白白屏误差边界是React生命周期方法的一部分,将用于抓错并生成有意义的信息给用户可用它报告出错服务

错误边界响应生命周期如何运作

回想JS中,我们可以使用两种方法类分解误差

静态获取StateFromError ()或构件Didecatch ()两者并用

创建响应构件错误边界

静态获取StateFromError名符其实报错后处理UI错误

1. Didscatch () 构件 :-开关用于生成错误信息

我们只能使用componentDidCatch()处理UI错误并创建错误报告程序

执行错误边界响应:-

1. 创建新项目命令低于

npx创建应用误差

二叉创建文件home.js

导入反射从'act'export测试从'./Test'class Home extends React.Component {         state={          hasError:false,          error:null,          errorInfo:null      }         static getDerivedStateFromError() {          return { hasError: true }      }         componentDidCatch(error, info) {           this.setState({ error: error, errorInfo:info})       }                render() {          if(this.state.hasError) {              return
         

          抱歉 出事了
         
}返回(
         

          
         
}导出默认Home

3级src文件夹中创建.js文件

导入反射从'act'const测试=props+++++
         

          {props.name.toString()}
         
}导出默认测试

4级导入测试js

5级ap.js导入自定义代码

导入反射从'act'从./home导入home函数App(){返回
         

          
显示错误信息
          
         
)!}导出默认a

6级转到终端启动项目m启动项目启动后我们会得到

创建-反应-应用项目内置报错,开发模式报错和报错边界都显示运行时生成时,它只显示出错边界当我们使用创建-反应-应用命令创建项目时,它会因自己的报错布局而重叠差错边界

要看到实际错误,我们必须关闭创建-反应-应用默认报告布局如下所示

创建项目时不使用创建-反应应用或无差错报告工具

如果我们要只看到项目错误边界使用创建-反应-app

并阅读下文博客React:

React门户工作

MobX反射

感谢您提供宝贵的时间继续阅读并学习