Shulou(Shulou.com)06/03 Report--

This article mainly explains the "what are the skills to optimize the performance of React App", the content of the explanation is simple and clear, easy to learn and understand, now please follow the editor's ideas slowly in depth, together to study and learn "what are the skills to optimize React App performance" bar!

Download the latest version of Kendo UI

Kendo UI is committed to new development to meet changing needs and supports the React framework through the Kendo UI JavaScript encapsulation of the React Javascript framework. Kendo UI for React can provide customers with a better user experience and build better applications faster.

Optimizing performance is an important technology to consider before delivering React applications and you can explore different ways to optimize React applications that can significantly improve application speed and the overall user experience.

Use React.Fragment to avoid adding additional nodes to DOM

When using React, it is sometimes necessary to render multiple elements or return a set of related items. This is an example:

Function App () {return (Hello Reactless Hello React Again!);}

If you try to run the application with the above code, you will encounter an error indicating that the Adjacent JSX element must be wrapped in a closed tag, which means that you need to wrap both elements in the parent div.

Function App () {return (Hello Reactless Hello React Again!);}

Doing so can fix the error, but with a certain degree of risk. You are adding an additional node to DOM, which is not required. In this case, the above are the child components that will be included in the parent component, which will be a problem.

Function Table () {return (This is a Table Component);} function Columns () {return (Hello Reactless Hello React Again!);}

The resulting HTML of the Table component will not be valid because additional div has been added.

Function Table () {return (This is a Table ComponentHello Reactless Hello React Again!);}

Take a look at a better way to solve this problem with React Fragment, which does not add any other nodes to the DOM. The syntax is as follows:

Function Columns () {return (Hello Reactless Hello React Again!);}

You can also declare a Fragment using short syntax.

Function Columns () {return (Hello Reactless Hello React Again!);}

Use Production Build

Another way to optimize your React application is to ensure that your application is bundled in a production environment before deployment, and by default your application is in development mode, which means that React will contain useful warnings. This is very useful when you are developing, but it may make your application larger and slower than usual. If your project is built using create-react-app, you can solve this problem by running npm run build before deployment, which creates a production-ready version of the application in the deployable build / folder. You can use React Developer Tools to confirm whether your application is in development or production mode.

If the React icon is blue with a dark background, your application is in production mode.

If your React application is in development mode, the icon will switch to a red background, as shown in the following figure.

It is also worth noting that if you use React through CDN, you should remember to update the React from the development file to one suitable for production.

Lazy loading components using React.Suspense and React.Lazy

Deferred loading is an excellent technique for optimizing and speeding up application rendering time, and the idea is to load components only when needed. React is bundled with React.lazy API, so you can render dynamic imports as regular components instead of loading regular components like this:

Import LazyComponent from'. / LazyComponent'

You can reduce performance risk by rendering components using lazy methods.

Const LazyComponent = React.lazy (() = > import ('. / LazyComponent'))

React.lazy takes a function that must call dynamic import (), which then returns a Promise, which parses to a module with a default export that contains a React component.

The lazy component should be rendered within the Suspense component, which allows you to add fallback content as loaded while waiting for the lazy component to load.

Import React, {Suspense} from 'react';const LazyComponent = React.lazy (() = > import ('. / LazyComponent')); function MyComponent () {return ();}

Using React.memo for component memory

React.memo is a good way to optimize performance because it helps caching functional components.

How it works is that when a function is rendered using this technique, it saves the result in memory, and the next time a function with the same parameters is called, it returns the saved result without having to execute the function again, saving bandwidth.

In the context of React, functions are functional components and parameters are props. This is an example:

Import React from 'react';const MyComponent = React.memo (props = > {/ * render only if the props changed * /})

React.memo is a high-level component, similar to React.PureComponent, but using functional components instead of classes.

Virtualize large lists using react-window

When you want to render a large table or list of data, it can greatly degrade the performance of your application. Virtualization can help in this case with libraries such as react-window, and react-window can effectively render lists of any size by rendering only the items currently visible in the list.

Import React from 'react';import {FixedSizeList as List} from' react-window';import'. / style.css';const Row = ({index, style}) = > (Row {index}); const Example = () = > ({Row}) Thank you for reading, the above is the content of "what are the skills to optimize React App performance". After the study of this article, I believe you have a deeper understanding of what skills to optimize React App performance, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.