React Performance Optimization Summary

Beginners may be full of expectations for react, feel that react may have blown up all other frameworks, and even unrealistic to think that react may even be able to explode the original rendering-the enthusiasm for the framework will indeed appear such unrealistic expectations. Let's take a look at what the react officials say. React official documentation in the Advanced Performanec section, this writes:

One of the first questions people ask when considering React for a project is whether their application would be as fast an D responsive as an equivalent non-react version
Obviously react himself is actually just trying to achieve the same performance as the non-react version,

The render you don't know

React component rendering is divided into initialization rendering and update rendering. The Render method of all components under the root component is called when the rendering is initialized, such as (green means rendered, this layer is no problem):

But when we want to update a subcomponent, such as the green component (which is passed down from the root component, the data applied to the green component changes):

Our ideal state is to invoke only the render of the component on the critical path, such as:

However, the default practice of react is to invoke the render of all components, and the building forum will then compare the generated virtual DOM, if unchanged, without updating. This contrast between render and virtual Dom is obviously wasteful, such as (yellow represents wasted render vs. virtual DOM)

Tips:
Split components are useful for reuse and component optimization.
Generates a virtual DOM and makes a comparison between render () and not before render ().
Life cycle of the update phase

Componentwillreceiveprops (Object Nextprops): Called when a mounted component receives a new props. This method should be used to compare this.props and nextprops for use with this.setstate () to perform state transitions. (There is a change in the internal data of the component, using state, but in the update phase, when the props changes, the state is changed, in this life cycle)
Shouldcomponentupdate (Object Nextprops, Object nextstate):-boolean is called when the component determines whether any changes are to be updated to the DOM. As an optimization implementation, compare This.props and Nextprops, This.state, and Nextstate, and return False if the react should skip the update.
Componentwillupdate (Object Nextprops, Object nextstate): forum www.whlwang.com is called immediately before the update occurs. You cannot call This.setstate () here.
Componentdidupdate (Object Prevprops, Object prevstate): Called immediately after an update occurs. (You can do some finishing work after the DOM has been updated)
Tips:
The optimization of the react is based on the Shouldcomponentupdate, which returns true by default, so any change in the prop or state will cause a re-render.
Shouldcomponentupdate

React calls a shouldcomponentupdate (nextprops, nextstate) function when each component's lifecycle is updated. Its duty is to return TRUE or false,true to indicate that it needs to be updated, false to indicate that it is not required, and return to True by default, even if you do not have the Shouldcomponentupdate function defined in the display. It is not difficult to explain the waste of resources that have occurred above.

To further illustrate the problem, we refer to a map of the official website to explain, such as (SCU indicates shouldcomponentupdate, green means return True (need to update), red means return false (do not need to update); Vdomeq represents virtual Dom alignment, Green is consistent (no update required), red indicates change (requires update)):

Depending on the rendering process, you will first determine whether the Shouldcomponentupdate (SCU) needs to be updated. If an update is required, the calling component's render generates a new virtual DOM, which is then compared to the old virtual Dom (VDOMEQ), if the comparison is not updated, and if the contrast is different, the DOM is updated according to the minimum granularity change, and if the SCU does not need to be updated, it is directly unchanged. At the same time its child elements remain unchanged.

C1 root node, green Scu (True), indicates that an update is required, and then vdomeq red, indicating that the virtual DOM is inconsistent and needs to be updated.
C2 node, red Scu (false), indicating that no updates are required, so c4,c5 are no longer checked
C3 node with C1, need to update
The C6 node, Green Scu (True), represents the need to update and then VDOMEQ red, which indicates that the virtual DOM is inconsistent and updates the DOM.
C7 node with C2
The C8 node, Green Scu (True), represents the need to update and then Vdomeq Green, which indicates that the virtual DOM is consistent and does not update the DOM.
How to take a pit:

{... this.props} (Do not misuse, please only pass component need props, spread too much, or the level spread too deep, will aggravate the shouldcomponentupdate inside the data burden, therefore, also please caution with spread attributes (< Component {... props}/>)).
:: This.handlechange (). (Please place the bind of the method in constructor)
This.handleChange.bind (This,id)
Complex pages do not finish in one component.
Please use the const element as much as possible.
Add key to the map, and key does not use index (variable). Refer to using PERF tool to study the effect of react key on rendering
Minimize the use of settimeout or an uncontrolled refs, Dom operation.
The data is as straightforward and flat as possible.

React Performance Optimization Summary