After the URL? React_pref can be used in conjunction with Chrome Performance for Performance testing

Single component optimization:

Core: Reduce the number of render function executions

Event binding:

  • Using a bind binding within Constructor:
constructor(props) {
    super(props)
    this.eventHandle = this.eventHandle.bind(this)}Copy the code
* Advantages: Bind only once and execute only once; * Cons: Constructor needs to be added to bind even if state is not requiredCopy the code
  • Use bind in render:
// ...
render() {
    return (
        <button onClick={this.clickHandle.bind(this)}></button>)}// ...
Copy the code
* Advantages: simple writing; * Disadvantages: Every time render is reexecuted, multiple bindings are required to use the same function (not recommended)Copy the code
  • Use the arrow function binding in Render:
// ...
render() {
    return (
        <button onClick={()= > this.clickHandle()}></button>)}// ...
Copy the code
* Advantages: the writing method is simple, and the performance is slightly better than the previous method; * Cons: Each time render is executed, a function has to be regeneratedCopy the code
  • Use arrow function binding when a function is initialized (experimental) :
// ...
clickHandle = (a)= > {
    // ...
}
render() {
    return (
        <button onClick={this.clickHandle}></button>)}// ...
Copy the code
* Advantages: The writing method is simple, combining the advantages of the above three methods; * Disadvantages: Currently experimental syntax, requires Babel translationCopy the code

Conclusion: The first method is the official recommendation method, which is also the best way of performance; Methods 2 and 3 have performance issues and re-render is triggered when the method is passed as a property to a child component because the child component’s props have changed; Method four is the best binding, but requires Babel translation

Attribute passing:

Because of the js feature (objects are stored in memory), if you pass an object, try to declare an index pointing to the object in advance, to avoid every time render generates a new object in memory.

Multi-component optimization:

Core: reduce the number of execution times of the subcomponent render function (reduce renderings of subcomponents)

Customize the shouldComponentUpdate for the child component

When the parent component render occurs, the child component is rerendered. Most of the time the child component doesn’t change anything, it received props from its parent, and its state doesn’t change, in which case the subcomponent’s mindless render function can do something in its shouldComponentUpdate() hook function. The hook function returns true by default, which means render executes; We do some business checks inside and return true or false to determine if the child component should be rerendered.

Use react.pureComponent (added at [email protected])

It is similar to React.component, except that PurComponent simply implements shouldComponentUpdate() while Component does not. Where it works: A component’s render function renders the same props and state for the same result (pure component), which can improve performance.

PureComponent’s shouldComponentUpdate() only shallowly compares the objects. If these contain these objects, the react.PureComponent’s shouldComponentUpdate() should accept only shallowly comparisons complex data structures, it may produce false-negatives for deeper differences. Only extend PureComponent when you expect to have simple props and state, or use forceUpdate() when you know deep data structures have changed. Or, consider using immutable objects to facilitate fast comparisons of nested data. Furthermore, React.PureComponent’s shouldComponentUpdate() skips prop updates for the whole Component subtree. Make sure all the Children components are also “pure”.

PureComponent’s shouldComponent() implements only shallow comparisons, deep comparisons are too costly (deep comparisons of objects require recursion, which is too complex and too costly).

You can use the immutable library for deep comparison of objects. It is less complicated, but the library is larger. Refer to the documentation for usage methods

Redux optimization

When the data used by our pages requires some processing (complex calculation) of the data in the redux fetched to be used, and many states are frequently switched, we can cache those states to avoid having to recalculate each time we switch. You can use the React official recommended library, Reselect, to refer to the documentation

List class component optimization

When we render a list, we must pass a key to each item or React will issue a warning. This key is not recommended to use the index of the array traversal, because it only helps to remove the warning, and has no real meaning. If we add an element to the front of the array, React will assume that all the elements have changed, so it’s all rerendered, and we don’t feel the optimization that the virtual DOM gives us. So the value of key must be unique to make sense.




Explore the react component performance optimization practices


High performance React components

Link to the original (linxunzyf.cn/posts/d5323…)