Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "Portals and error boundary handling in React", so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "Portals and error boundary handling in React" article.

Portals

It can be called a slot, but unlike slot in Vue, it refers to rendering an React element to a specified container (real DOM)

For example, if the Modal component is rendered directly as a child element of the real structure of body by default, then we can create a React element with the help of ReactDOM.createPortal (ReactElement, RealDOM container), the sample code:

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}

We can see in the browser console that the real Modal component is actually rendered as a direct child element of body, but through the React developer tool, we can see that the Modal component is still under the App component in the structure of the virtual DOM tree and in the div class named app-container

Therefore, we can conclude that the virtual DOM tree structure of React components can be inconsistent with the real DOM tree structure.

Therefore, we need to pay attention to the event bubbling.

Events in React are actually wrapped

Its event bubbling is based on the structure of the virtual DOM tree, not the bubbling mechanism of the real DOM tree.

Error boundary handling

By default, if an error occurs in a component during rendering (render), it will cause the entire component tree to be unloaded

Error boundary: a component that captures errors that occur in child components during rendering and has the ability to prevent errors from continuing to propagate to the parent component

Let a component catch errors (class components):

Using the static method static getDerivedStateFromError, this function is triggered when sub-components render errors

Static methods, so you cannot use this

This function returns a value (object) that mixes the override state with state

Trigger time: after an error occurs in the rendering sub-component, before updating the page

It will be triggered only if there is an error in the rendering of the child component (that is, an error in its own component or its sibling component or parent component will not be triggered)

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}}

Use the componentDidCatch (error, info) function

It's an example method.

Run time after rendering sub-component error and page update (changing the state will cause the component tree to be rebuilt after unloading, which is more wasteful and efficient)

This function is usually used to pass and record error messages to the background

Import React, {PureComponent} from "react" export default class ErrorBoundary extends PureComponent {state = {isError: false} componentDidCatch (error, info) {/ / info is the error summary information 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}} what happens if you don't use the wrong boundary?

Since React 16, any error that is not caught by the error boundary will cause the entire React component tree to be unloaded.

Experience has taught us that removing it completely is better than keeping the wrong UI. For example, in a product like Messenger, showing an abnormal UI to the user may cause the user to send the information to someone else by mistake.

Adding error boundaries allows you to provide a better user experience when an exception occurs in the application. For example, Facebook Messenger packages the sidebar, information panel, chat history, and information input box in a separate error boundary. If some of these UI components crash, the rest can still interact.

Pay attention

Some errors, the error boundary component will not catch

Errors in its own components

Asynchronous errors (such as those thrown in setTimeout)

Import React, {PureComponent} from "react" / / ErrorBoundary.jsxexport default class ErrorBoundary extends PureComponent {state = {isError: false} / * this function will not run * / 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 component export default funtion Comp () {setTimeout (() = > {throw new Error ("setTimeout error")}, 1000) return Comp} / / App.jsx uses export default function App () {return}

The error thrown in the event

That is, only synchronization errors during rendering subcomponents are handled

The above is about the content of this article on "how to achieve Portals and error boundary handling in React". I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.