About React performance optimization

A number of blogs about react performance optimization have been read over the past few days, most of which are referred to as react 15.3 's newly added purecomponent, which improves the performance of the page by using this class to reduce react repeated rendering. Friends who have used react know that the react component will trigger render only if the state and props change, and if state and props do not change, render will not execute. Usually when writing a page, if you do not use the Purecomponent class, in order to avoid the performance problem of repeated rendering, we will use Shouldcomponentupdate manual to compare whether the page needs to be re-rendered, then we can do a deep comparison, That is, comparing the current state with nextstate or props with the nextprops layer, if the comparison finds unequal, the function returns TRUE to render the component again, and false to prevent the component from re-rendering if the comparison finds that the value has not changed. When we use the Purecomponent class, it is no longer necessary to manually check whether the component needs to be re-rendered, because Purecomponent will help us examine whether the state and prop have changed to determine whether to invoke the Render method to improve performance. However, it is important to note that when using purecomponent, react only makes a shallow comparison of the outermost layer:

if (This._compositetype = = = Compositetypes.pureclass) {
Shouldupdate =!shallowequal (prevprops, nextprops) | | ! Shallowequal (Inst.state, nextstate);
}
Shadowequal only shallow check the props and state of the pieces, so nested objects and arrays are not compared. So when using purecomponent, we should pay special attention to this point.

Well, to share today, in addition to the above on the principle of purecomponent, but also to share a react performance optimization of the dry blog,

English Original: React performance Fixes on Airbnb Listing pages:https://medium.com/airbnb-engineering/ Recent-web-performance-fixes-on-airbnb-listing-pages-6cd8d93df6f4

React performance Optimization in Airbnb details page: https://juejin.im/entry/5bab390c5188255c8a06013f

Reprint Address: https://www.f2ecoder.net/857.html

About React performance optimization