React中Portals与错误边界处理怎么实现
这篇“React中Portals与错误边界处理怎么实现”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“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(, document.body) export default function App() { return }
我们可以在浏览器控制台中看到,真实的 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 Something Wrong...
}
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 Something Wrong...
}
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 Something Wrong... } return this.props.children } } // Comp.jsx Comp 组件 export default funtion Comp() { setTimeout(() => { throw new Error("setTimeout error") }, 1000) returnComp} // App.jsx 使用 export default function App() { return <>> }
事件中抛出的错误
即:仅处理渲染子组件期间的同步错误
以上就是关于“React中Portals与错误边界处理怎么实现”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。
文章题目:React中Portals与错误边界处理怎么实现
URL标题:http://pwwzsj.com/article/pegegh.html