5 Recommended Tools for Optimizing Performance in ReactJS

栏目: IT技术 · 发布时间: 4年前

内容简介:In the spirit of speed and optimization, let’s jump straight to my list of favorite tools for performance monitoring and optimization for React.Profiler, a new component in React, developed by B. Vaughn offers a way to measure how many times your component

My top favorite tools for monitoring and optimizing my React components.

5 Recommended Tools for Optimizing Performance in ReactJS

In the spirit of speed and optimization, let’s jump straight to my list of favorite tools for performance monitoring and optimization for React.

1. <Profiler />

5 Recommended Tools for Optimizing Performance in ReactJS
My demo project: https://codesandbox.io/s/agitated-violet-ojlur

Profiler, a new component in React, developed by B. Vaughn offers a way to measure how many times your components get re-rendered and how much time and resources that rendering takes. Profiler takes a function prop onRender that receives time metrics whenever a component (wrapped by the Profiler component) is mounted or updated. It is a great way to inspect and detect inefficiencies in your React apps.

Here’s a simple example:

import { unstable_Profiler as Profiler } from "react"<Profiler id="Counter" onRender={callback}>
    <Counter />
</Profiler>

The id prop is used to id the Profiler that is reporting. The onRender callback function will be called with the below args when the Counter component is mounted or updated.

function callback(id, phase, actualTime, baseTime, startTime, commitTime) {
    
log("id: " + id, "phase:" + phase, "actualTime:" + actualTime,   "baseTime: " + baseTime, "startTime: " + startTime, "commitTime: " +  commitTime)}

The function’s arguments are time metrics taken from the rendering of the Counter component. Let's inspect each of them:

  • id : The unique ID that was set on the Profiler component.
  • phase : This will report whether the component is in its "mount" phase or "update/re-render" phase.
  • actualTime : The time it took the Profiler to mount or update its descendants.
  • baseTime : The time it took each individual component in the Profiler tree to mount or update.
  • startTime : The time the Profiler started measuring the mount/render time for its descendants.
  • commitTime : The time it took to commit an update.

These parameters will help us identify which component tree is slowing us down and which is high performance.

My demo project

I created two components Counter1 and Counter2 . I wrapped them each in a Profiler component with ids “Counter1” and “Counter2” respectively. I displayed the time metrics of each component in the DOM, so you can clearly see the time it takes for each component to mount or update. Give it a try

2. React Developer tools

5 Recommended Tools for Optimizing Performance in ReactJS

https://chrome.google.com/webstore/detail/react-developer-tools

‘React Developer tools’ is a DevTool extension built by the React team. It surely needs no introduction but there’s one feature I’d like to bring to your attention — the “Highlight Updates”. That’s a great feature for tracking which component gets re-rendered. It does this by coloring the boundaries of components… whenever they are re-rendered.

Let’s say you have a component tree like so:

5 Recommended Tools for Optimizing Performance in ReactJS

If Main re-renders, the boundaries that encapsulate the Counter and Count components will be briefly colored with a color highlight.

To activate this feature, go to your DevTools and click on the “React” tab. Click on a settings icon on the top right. A popup will appear. There, click on the “Highlight Updates” checkbox.

The type of color band that appears depends on how often/frequent a component is re-rendered.

|    green - low frequent update
|    blue - average frequent update
v    red - denotes a very frequent update

With this tool, we can track and easily identify by colors which component frequently updates and apply the necessary optimization to it.

3. Bit.dev

5 Recommended Tools for Optimizing Performance in ReactJS
Example: exporting/publishing components from a React app to a shared collection

Bit lets you easily share components from any codebase/repo to a centralized component hub.

It is not a “traditional” pick for a list of this sort but I love to use it to publish and organize my (performance-optimized) components for future reuse.

It just doesn’t make sense for me to spend so much time optimizing components — monitoring, analyzing and implementing different optimization tricks — just for a single-use. I also recommend using it with your team as a way to build faster using reusable tested and optimized components.

Here’s a short example for sharing components from a very simple to-do app:

5 Recommended Tools for Optimizing Performance in ReactJS

First, you’d need to create a component collection in Bit.dev .

Then, install Bit’s CLI tool globally and login

$ yarn global add bit-bin$ bit login

Then, go to your project and start sharing:

// Initialize a workspace in your project’s directory$ bit init --package-manager yarn
// Add components to track$ bit add src/components/*
// Configure a compiler to make the usable in other build setups
// I use here the React with TypeScipt compiler$ bit import bit.envs/compilers/react-typescript --compiler
// Tag your added components (this will also build and test them)$ bit tag --all 1.0.0// Export them to your component collection at bit.dev$ bit export <user-name>.<collection-name>

Here’s the final product — a shared collection of all this app’s components

5 Recommended Tools for Optimizing Performance in ReactJS
A demo React with TS collection

4. why-did-you-render

5 Recommended Tools for Optimizing Performance in ReactJS

https://github.com/welldone-software/why-did-you-render

Built by Welldone Software , this tool gives feedback on wasted re-renders.

It performs a diff on the component's props and alerts you in the console if the props did not change despite the component being re-rendered when a component re-rendered even though the props have not changed.

Redundant re-rendering might not be noticeable in small apps, but would surely be felt when on larger scales.

This tool actually hooks into React to follow the component’s lifecycle, so it can perform the diff on the component’s props when they re-render.

It is quite easy to use. First, install it via npm install @welldone-software/why-did-you-render --save . Next, manually set the static whyDidYouRender property on class components like this:

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

For function components:

function Counter() {
  return(
   // ...
  )
}Counter.whyDidYouRender = true;

5. Performance timeline (Browser profiling)

This tool is built in the Chrome DevTools. You’ll find it in the Performance tab.

It is particularly useful for visually identifying components that are egregiously re-rendering. It is very helpful in identifying parts of the UI that updates unnecessarily and how often it occurs.

To use that tool, first, serve your React app in development mode.

Load the app in your browser by navigating to localhost:3000 .

Open your DevTools, click on the “Performance” tab, if there is nothing like that, you will see “Timeline”, click on it. It is the same as the “Performance”.


以上所述就是小编给大家介绍的《5 Recommended Tools for Optimizing Performance in ReactJS》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

HTTP/2基础教程

HTTP/2基础教程

Stephen Ludin、Javier Garza / 罗正龙、郑维智 / 人民邮电出版社 / 2018-1 / 49.00元

让网站和应用更快速、更简洁、更稳健,从而有效提升用户体验,这无疑是众多开发者梦寐以求的。然而互联网发展日新月异,HTTP/1.1协议已经难以满足现今的需求。在众多Web性能提升方案中,HTTP/2值得尝试。 本书是HTTP/2实用指南,介绍了HTTP/2的设计初衷和新特性,以及如何才能充分利用这些特性来打造高性能网站及应用。作者用定量分析方法,对比了不同网络环境下及不同浏览器上HTTP/1.......一起来看看 《HTTP/2基础教程》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具