脚本宝典收集整理的这篇文章主要介绍了React中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.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中Portals与错误边界处理实现全部内容,希望文章能够帮你解决React中Portals与错误边界处理实现所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。