导航：首页 > 开发技术 >

React中Portals与错误边界处理怎么实现

发表于：2024-09-22 作者：千家信息网编辑

千家信息网最后更新 2024年09月22日，这篇"React中Portals与错误边界处理怎么实现"文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们

千家信息网最后更新 2024年09月22日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.jsxexport 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)    return Comp
}// App.jsx 使用export default function App() {    return <>                                }

事件中抛出的错误

即：仅处理渲染子组件期间的同步错误

以上就是关于"React中Portals与错误边界处理怎么实现"这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注行业资讯频道。

很赞哦！