文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

React中Portals与错误边界处理实现方法

2023-06-20 17:12

关注

这篇文章主要讲解了“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 树结构可以是不一致的

因而需要注意事件冒泡

错误边界处理

默认情况下,若一个组件在渲染期间 (render) 发生错误,那么就会导致整个组件树全部被卸载
错误边界:就是一个组件,用于捕获 渲染期间 子组件发生的错误,并有能力阻止错误继续向父组件传播

让某个组件捕获错误 (类组件):

使用静态方法 static getDerivedStateFromError,子组件渲染错误时会触发此函数

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与错误边界处理实现方法”的内容了,经过本文的学习后,相信大家对React中Portals与错误边界处理实现方法这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯