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(<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.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 <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与错误边界处理怎么实现”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网精选频道。