Generally speaking, React is fast, but it also often has some small bugs that can cause performance problems. Slow component installations, deep component trees and unnecessary render loops can all cause your app to become slow.
Well, there is no way out, there are a lot of tools, including those built into React, that can help with performance issues. In this article, I will introduce you to several tools and techniques. Each section also has an interactive, (I hope) fun demo!
Tool #1: Performance Timeline
React 15.4.0 introduces a new Performance Timeline feature that lets you see exactly how components are mounted, updated, and unmounted. It also lets you visualize the associated component lifecycle.
Note : Right now this feature is only available in Chrome, Edge and IE as it leverages the User Timing API which has not yet been implemented in all browsers.
how it works
- Open your app and append the query parameter: react_perf. For example, http://localhost:3000?react_perf
- Open the Chrome DevTools Performance tab and press Record .
- Perform the action you want to analyze.
- stop recording
- Check the visualization under User Timing .
understand the output
Each colored bar shows when the component is doing "running". Since JavaScript is single-threaded, whenever a component is loading or rendering, it blocks the main thread and prevents other code from running.
The text [update] in parentheses describes which part of the component's lifecycle is taking place. The timeline breaks down each step so you can see fine-grained timing on the [componentDidMount][componentWillReceiveProps][ctor](constructor) and () methods [render].
Stacked bars represent the component tree. While it's a typical thing to have a fairly deep component tree in React, if you're optimizing for frequently installed components, it can help reduce the number of wrapper components, since each component adds a small performance and memory penalty.
One thing to note here is that the timeline in the timeline is for the development build "React" which is much slower than production. In fact, the performance schedule itself can slow down your application. While these numbers do not represent real time, the relative timing between the different components is accurate. Also, whether the component is updated or not is completely independent of the prod build.
Demo #1
To give you a play around, I've rigged the TodoMVC application and I'm having some serious performance issues. You can try it here.
To view the timeline, open Chrome Dev Tools, go to the "Performance" tab, and click Record. Then add some TODOs in the app, stop recording and check the timeline. See if you can spot which components are causing performance issues :)
Tool #2: Why there is no update
One of the most common issues affecting performance in React is unnecessary render loops. By default, React components will re-render when their parent renders, even if their props haven't changed.
For example, I have a simple component like this:
class DumbComponent extends Component {
render() {
return <div> {this.props.value} </div>;
}
}
Use parent component:
class Parent extends Component {
render() {
return <div>
<DumbComponent value={3} />
</div>;
}
}
Whenever the parent component renders, the DumbComponent will re-render even though its props haven't changed.
In general, if render runs, and there are no changes to the virtual DOM, then this is a wasted rendering loop, since the render method should be pure and have no side effects. In a large-scale React application, detecting where this happens can be tricky, but luckily there is a tool that can help!
使用 why-did-you-update
why-did-you-update is a library that hooks into React and can detect potentially unnecessary rendering of components. It detects when the component's render method is called, even though its props haven't changed.
Establish
1.安装npm： npm i --save-dev why-did-you-update
2. Add this snippet anywhere in your app:
For more details, please refer to here: http://www.igeekbar.com/igeekbar/post/262.htm