How React avoid rendering


We can store any type of data in the React component, to control the status of the entire component by changing the PROPS and STATE. When PROPS and STATE changes, React will render the entire component, and the process replaces the process can be simplified as shown below:

React如何避免重渲染 The understanding of the DIFF before the translator is A component that chases the PROPS, the DIFF can automatically calculate the difference between the internal DOM tree in the component, then compare, find the true changed DOM node, rendering the changed part. This is a wrong understanding, and the DIFF algorithm is only used to calculate the component / virtual node of changing status or PROPS, and this component / virtual node, no matter how large, it will render.

Assume that there is a component that is completed, as shown below:

Next, since the state changes, it is necessary to render the green node of the figure below. , As shown below:

The general idea is that only the three green nodes below can complete the update of the component React如何避免重渲染

however! As long as the component’s PROPS or STATE changes, it will render the entire component, so in addition to the above three green nodes, it is also necessary to render all yellow nodes React如何避免重渲染

In addition to the three nodes necessary to render, other nodes that do not have to be rendered, which is a great waste of performance. This will result in a very poor experience of the page for complex pages. Therefore, we must improve the performance of the component, you should do everything possible to reduce unnecessary rendering. React如何避免重渲染



This function will re-render the componentBefore calling, the return value of the function determines if the component needs to re-rendering. The default return value of the function is True, meaning as long as the component’s PrOPS or State has changed, the Virtual DOM will be rebuilt, and then the DIFF algorithm is compared, and then the comparison result decides whether to render the entire component. The return value of the function is false means that it is not necessary to re-rendering. React如何避免重渲染

The function returns to true.


React officially provides the PureRenderMixin plugin, the function of the plugin is unnecessary The next function staycomponentupdate returns FALSE. Use this plugin to reduce unnecessary rendering, get a certain degree of performance improvement, the usage method is as follows:

Import PureRenderMixin from ‘react-addons-pure-render-mixin’; class FooComponent extends React.Component {constructor (props) {super (props); this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind (this);} render () {return



We need to overwrite the ShouldComponentUpdate in the component, and the definition of PureRenderMixin.SholdComponentUpdate in the PureRenderMixin source code

ShouldComponentUpdate (nextprops, nextstate) {Return ShallowCompare (this, nextprops, nextstate);}
rewritten method According to the current state of the component and the next state of the component, the return result is false if the state of the component changes, and the state does not change, the result is true

ShouldComponentUpdate (NextProps, Nextstate) {Return! Shallowequal (this.props, nextprops) ||! Shallowequal (this.state, nextstate);}

  in React Inside the latest version, it provides the basics of React.PureComponent without the need to use this plugin.  
Translator Note: So when a larger component determines rendering, we can bind a new ShouldComponentUpDate method in each sub-component, which reduces the number of sub-component renders. .

We can rewrite this function of ShouldComponentUpdate so that it can be compared to anything, which is deep comparison (compared to a layer of recursive), which is very time consuming Generally, it is generally not recommended, because it is necessary to ensure that the time spent is less than rendering the entire component, and in order to reduce the time, we should ensure that PROPS and State are as simple as possible, do not put unnecessary properties Put State, can be calculated from other attributesDo not put it in State.
   The comparison of complex data is very time-consuming, and may not be compared, by using immutable.js, this problem can be solved well. The basic principle of immutable.js is to return the same reference for the constant object, and for a changed object, return to a new reference. Therefore, the following code can only be used for the following code: 

ShouldComponentUpdate () {RETURN REF1! == REF2;}

It also needs to rewrite the ShouldComponentUpdate method in subcomponents.

Pure Component

If a component is only related to PROPS and STATE, given the same PROPS and State will render the same result, then this component is Called with pure components, in order to say that the pure components only rely on the component’s PrOPs and State, the following code represents a pure component.

Render () {return ( {this.state.Rows}
If the props of a sub-component is fixed, we are called stateless components. Use the PureRendermixin plugin in this component to ensure that the return of ShouldComponentUpdate has been false. So, in the clear components and stateless components, rewrite the ShouldComponentUpda in the stateless componentThe TE method is the best choice.


When writing the dynamic sub-assembly, a warning will be reported if the KEY PROP is not given to the dynamic subkey. This warning means that if each subcomponent is an array or iterator, then have a unique key prop, then what this key prop is what? We imagined, if you need to render a list of 5,000 grades, it will be updated every few seconds, most of which rankings are only changed, and there is a small part is completely updated, this When Key played, it used to identify the current uniqueness of PROPS. Now try to describe this scene

, Name: ‘sysuzhyupeng’}, {SID: ‘10008’, Name: ‘ZHYUPENG’} , {SID: ‘120000’, Name: ‘yupeng’}]
Where SID is a student number, then we will implement the list of results ranked
Import React from ‘React’; Function Rank ({List}) {RETURN (
{ ((entry, index) => (

{ }



We set Key to serial numbers, which did not report this, but this is very inefficient The practice, this key is used to do Virtual Dom Diff, the above practice is equivalent to using aMachine key, no matter whether there is no identical item, the update will render.

The correct approach is very simple, just replacing the content of Key to SID.
 There is another problem. When Key is the same, how will react rendering, the answer is only the first identical KEY item, and will report a warning.   The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Cloud. 
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment