React中Portals与错误边界处理实现
Portals
可以说是 插槽,但 不同于 Vue 中的 slot,它指的是将一个 React 元素渲染到指定的容器 (真实 DOM) 中
比如说,Modal 组件一般默认直接作为 body 的真实结构的子元素渲染出来,那么我们就可以借助 ReactDOM.createPortal(ReactElement, RealDOM container) 创建一个 React 元素,示例代码:
import React from 'react' import ReactDOM from 'react-dom' import Modal from './components/Modal' const PortalModal = ReactDOM.createPortal(<Modal />, document.body) export default function App() { return <div className="app-container"> <PortalModal /> </div> }
我们可以在浏览器控制台中看到,真实的 Modal 组件其实是作为 body 的直接子元素渲染出来的,但通过 React 开发者工具,我们可以看到 Modal 组件在虚拟 DOM 树的结构中依旧在 App 组件下,类名为 app-container 的 div 中
所以,我们可以得出结论:React 组件虚拟 DOM 树结构与真实 DOM 树结构可以是不一致的
因而需要注意事件冒泡
- React 中的事件其实是经过包装的
- 它的事件冒泡是根据虚拟 DOM 树的结构来冒泡的,而不是真实 DOM 树的冒泡机制
错误边界处理
默认情况下,若一个组件在渲染期间 (render) 发生错误,那么就会导致整个组件树全部被卸载
错误边界:就是一个组件,用于捕获 渲染期间 子组件发生的错误,并有能力阻止错误继续向父组件传播
让某个组件捕获错误 (类组件):
使用静态方法 static getDerivedStateFromError,子组件渲染错误时会触发此函数
- 静态方法,所以不能使用 this
- 此函数返回值 (对象) 会与 state 混合覆盖状态
- 触发时间点为:渲染子组件发生错误后,在更新页面之前
- 只有子组件渲染发生错误,才会触发 (即自身组件发生错误或其兄弟组件、父组件发生错误均不会触发)
import React, {PureComponent} from 'react' export default class ErrorBoundary extends PureComponent { state = { isError: false } static getDerivedStateFromError(error) { console.log('Rendering Error: ', error) return { isError: true } } render() { if (this.isError) { return <span>Something Wrong...</span> } return this.props.children } }
使用 componentDidCatch(error, info) 函数
- 是个实例方法
- 运行时机在渲染子组件发生错误后,且页面更新之后 (更改状态会导致组件树卸载完之后又重新构建组件树,比较浪费效率)
- 通常该函数用于往后台传递并记录错误信息
import React, {PureComponent} from 'react' export default class ErrorBoundary extends PureComponent { state = { isError: false } componentDidCatch(error, info) { // info 即为错误的摘要信息 console.log('Rendering Error: ', error) console.log('Rendering info: ', info) this.setState({ isError: true }) } render() { if (this.isError) { return <span>Something Wrong...</span> } return this.props.children } }
如果没有使用错误边界会怎样?
自 React 16 起,任何未被错误边界捕获的错误将会导致整个 React 组件树被卸载。
经验告诉我们,完全移除比保留错误UI更好。例如,在类似 Messenger 的产品中,把异常的 UI 展示给用户可能会导致用户将信息错发给别人。
增加错误边界能够让你在应用发生异常时提供更好的用户体验。例如,Facebook Messenger 将侧边栏、信息面板、聊天记录以及信息输入框包装在单独的错误边界中。如果其中的某些 UI 组件崩溃,其余部分仍然能够交互。
注意点
某些错误,错误边界组件不会捕获
自身组件的错误
异步的错误 (如 setTimeout 中抛出的错误)
import React, {PureComponent} from 'react' // ErrorBoundary.jsx export default class ErrorBoundary extends PureComponent { state = { isError: false } /* 此函数不会运行 */ static getDerivedStateFromError(error) { console.log('Rendering Error: ', error) return { isError: true } } render() { if (this.isError) { return <span>Something Wrong...</span> } return this.props.children } } // Comp.jsx Comp 组件 export default funtion Comp() { setTimeout(() => { throw new Error('setTimeout error') }, 1000) return <div>Comp</div> } // App.jsx 使用 export default function App() { return <> <ErrorBoundary> <Comp /> </ErrorBoundary> </> }
事件中抛出的错误
即:仅处理渲染子组件期间的同步错误
到此这篇关于React中Portals与错误边界处理实现的文章就介绍到这了,更多相关React Portals与错误边界处理内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误(解决方案)
这篇文章主要介绍了关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误,本文给大家分享解决方案,需要的朋友可以参考下...2021-05-12React引入antd-mobile+postcss搭建移动端
本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程,文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了,防止大家踩坑,特此把解决方案分享到脚本之家平台,需要的朋友参考下吧...2021-06-21- 这篇文章主要介绍了React使用高德地图的实现示例(react-amap),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
使用 React 和 Threejs 创建一个VR全景项目的过程详解
这篇文章主要介绍了使用 React 和 Threejs 创建一个VR全景项目的过程详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06- 思路其实没有那么复杂,把地图想成一个盒子容器,地图中心点想成盒子中心点;扎点在【地图中心点】不会动,当移动地图时,去获取【地图中心点】经纬度,设置某个位置的时候,将经纬度设置为【地图中心点】即可...2021-06-20
- 这篇文章主要为大家详细介绍了React列表栏及购物车组件使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-06-28
- 这篇文章主要介绍了react使用antd表单赋值,用于修改弹框的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29
- 这篇文章主要介绍了React Native 启动流程简析,文以 react-native-cli 创建的示例工程(安卓部分)为例,给大家分析 React Native 的启动流程,需要的朋友可以参考下...2021-08-18
- 这篇文章主要介绍了一百多行代码实现react拖拽hooks,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-21
- useState 通过在函数组件里调用它来给组件添加一些内部 state,React 会在重复渲染时保留这个 state,接下来通过一个示例来看看怎么使用 useState吧...2021-06-04
- 高阶组件就是接受一个组件作为参数并返回一个新组件(功能增强的组件)的函数。这里需要注意高阶组件是一个函数,并不是组件,这一点一定要注意,本文给大家分享React 高阶组件HOC使用小结,一起看看吧...2021-06-13
- 本文主要介绍了react为什么不推荐使用index作为key,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-07-22
- 这篇文章主要介绍了React中使用setInterval函数的实例,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06
关于antd tree和父子组件之间的传值问题(react 总结)
这篇文章主要介绍了关于antd tree 和父子组件之间的传值问题,是小编给大家总结的一些react知识点,本文通过一个项目需求实例代码详解给大家介绍的非常详细,需要的朋友可以参考下...2021-06-02- 这篇文章主要介绍了react自动化构建路由的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-23
- 这篇文章主要介绍了React Class组件生命周期,包括react组件的两种定义方式和class组件不同阶段生命周期函数执行顺序,本文给大家介绍的非常详细,需要的朋友可以参考下...2021-08-14
- 这篇文章主要介绍了react+ts实现简单jira项目,本文通过图文实例相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-07-30
- 这篇文章主要介绍了React中组件之间通信的方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-07-27
- 本篇文章主要介绍了React组件通信详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2021-10-15
- 众所周知,react推出了hooks之后,很多项目就开始往hooks上靠拢,所以也就出现了class和hooks交叉使用的项目。这个时候使用ref需要注意一些东西...2021-06-20