1. binding events in the constructor function in this point
To a function assigned to a variable, and then use that variable to perform the function will cause the loss of this, it is necessary to bind this, the binding on the constructor function ensures that only bind once, if placed render function bind given this, then each will go to render binding once this, that is very cost performance.
2. Use the arrow function is a function of asynchronous write setState
setState it is an asynchronous function, he will merge several revisions, lower than the frequency diff algorithms. This will also improve performance.
3. The use of virtual DOM
Description DOM with JS objects, not really to call the API to generate real browser DOM. Ah like this will generate more than before to greatly improve performance.
4. The same alignment layer
Using the same alignment layer than the old and new states, found that when a node directly replace inconsistent subtree of this node. Regardless of its sub-tree is not really a change.
5. key value using
React cycle when the list would require each list item has a unique key value stable, its purpose is to change state when the old and new state of each list item can correspond up to facilitate comparison.
6. shouldComponentUpdate
When the parent component that is being re-rendered render function is executed, sub-assemblies will be re-rendered by default, but often do not need to re-render each sub-assembly. Then you can use shouldComponentUpdate to determine whether you really need to re-render subcomponents. Only one judgment, we can save a lot of consumption.
So for a change parent component and sub-assembly of the same case, the use of shouldComponentUpdate will improve performance.
shouldComponentUpdate(nextProps, nextState) {
if(nextProps.content === this.props.content) {
return false;
} else { return true; } }Author: huyaoyao
link: https: //www.jianshu.com/p/bc00302c8d40
Source: Jane book
Jane book copyright reserved by the authors, are reproduced in any form, please contact the author to obtain authorization and indicate the source.