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

This article mainly explains "what are the React performance optimization tools". The explanation in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn what React performance optimization tools are available.

Profiler

Code SandBox

You can go to

Https://codesandbox.io/s/react-profiler-example-o75nc?fontsize=14&hidenavigation=1&theme=dark online editing effect.

Profiler is a component of React, developed by B. Vaughn, which measures the frequency of React application rendering and the time and resources spent on rendering. Profiler provides a function attribute onRender, which accepts some time metrics when the component mount or update. With these time indicators, you can find inefficient code.

Import React, {Profiler} from 'react';...

Id is used to identify the corresponding Profiler component. The onRender function is executed when the component mount or update. Its parameter structure is as follows:

Function onRenderCallback (id, phase, actualDuration, baseDuration, startTime, commitTime,) {console.log ('onRenderCallback', {id, phase, actualDuration, baseDuration, startTime, commitTime,})}

Id component id

Phase execution phase, mount or update

The time it takes for actualDuration Profiler and subcomponents to render the current update, which is larger than the value of the update phase at the first mount

The duration of the last rendering of the baseDuration subcomponent

StartTime starts rendering the current updated timestamp

CommitTime React submits the timestamp of the current update

These data can help us analyze the efficiency of components and find performance bottlenecks.

React Developer tools

React Developer tools is a powerful browser plug-in released by the official team of React. What I want to introduce is the function of Highlight Update. This tool is very effective in detecting repeated rendering of components. He can use different colors to identify the borders of the component, and the yellower the color means the more times the component is rendered repeatedly.

If you have a component tree like this:

If the Main component renders repeatedly, a border appears on the boundary that encapsulates the Counter and Count components to indicate repeated rendering.

After we activate this feature, we will open and close the menu on the right side of the ReactJS website, and a border prompt will appear:

How do you activate this feature? Find the Components column of the debugging tool, click the pinion in the upper right corner, and then select Highlight updates when components render in the pop-up window.

The type of border depends on the degree of repetitive rendering, and the more repeated rendering, the darker the color.

| | Green-low frequency update | Blue-general frequency update v red-high frequency update |

By using this tool, we can easily find the component with performance problems through the border color and optimize it.

Why-did-you-render

Https://github.com/welldone-software/why-did-you-render, is a tool developed by Welldone Software to give feedback on repeated rendering of components.

It will diff the props of the component, and if the component is re-rendered but the props has not changed, it will remind you on the command line that the props has not changed.

Repeated rendering may not have much impact in small applications, but it will certainly have an impact in large projects.

This tool is embedded in the life cycle of the React component, so it can compare whether the props has changed when the component is re-rendered.

The method is easy to use, install it first

Npm install @ welldone-software/why-did-you-render-- save

Then register once:

WhyDidYouRender (React, {trackAllPureComponents: true})

Then to class component:

Class Counter extends React.Component {static whyDidYouRender = true; render () {/ /...}}

For function components:

Function Counter () {return (/ /...)} Counter.whyDidYouRender = true

Here is a complete example. Every time you setState, style= {{width: "100%}} is a new value, so a comparison is triggered.

Import React from "react"; import ". / styles.css"; const whyDidYouRender = require ("@ welldone-software/why-did-you-render"); whyDidYouRender (React, {trackAllPureComponents: true}); export default class App extends React.Component {constructor () {super (); this.state = {count: 1} } render () {return (this.setState ({count: this.state.count + 1})} > add

{this.state.count}

);}} function Comp (props) {return 100;} Comp.whyDidYouRender = true

Go to Code SandBox to test

Https://codesandbox.io/s/distracted-architecture-t9ih3?file=/src/App.js .

Performance timeline (Browser profiling)

This tool is the debugging tool that comes with Chrome, in the Performance column.

It can be very effective in viewing components that are heavily repeatedly rendered, and it can also easily view unnecessary updates to UI and how often they occur.

Start your React app in development mode before using the tool.

Then, open the developer tools and switch to the Performance panel.

Click the dot in the middle or use the shortcut key command + e, and the developer tool starts recording, and then you can do some interactive actions in your application.

It is recommended that the recording time is more than 20 seconds. When the time is up, click the stop in the middle, or the red dot in the upper left corner.

Then we can see the timeline.

We can slide to select an area and then zoom in by W or zoom out by S. Select an area and zoom in with the W key all the time.

Each orange bar represents an execution process, in which you can see the component name, the phase of the component execution, and the execution time. In the picture above, the execution phase of App is the update phase, which means that the App component is performing an update operation during this period of time, and the execution time is 1.71 ms.

Each time a component is rendered, a new yellow bar is generated. If a component is rendered multiple times, this Timings chart will make it easier for you to trace the cause. The length of each yellow bar represents the execution time of the component, and the longer the yellow bar, the longer the execution time. You can use this tool to diagnose the page.

Thank you for your reading, the above is the content of "what are the React performance optimization tools". After the study of this article, I believe you have a deeper understanding of what React performance optimization tools are available, 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.