React involves performance optimizations

  • ShouldComponentUpdate and React.PureComponent avoid unnecessary component updates and apply to class components.

  • ImmutableJS

We can use deepCopy and deepCompare in shouldComponentUpdate() to avoid unnecessary render(), but deepCopy and deepCompare are generally very performance intensive.

Immutable Data is Data that, once created, cannot be changed. Any modification or addition or deletion of an Immutable object returns a new Immutable object.

Immutable is a Persistent Data Structure, which ensures that old Data can be used to create new Data without changing it. And to avoid the performance cost of deepCopy copying all nodes once, Immutable uses Structural Sharing, where if a node in the object tree changes, only that node and its affected parent are modified, and the other nodes are shared.

  • React.memo()ShouldComponentUpdate (); shouldComponentUpdate(); shouldComponentUpdate(); shouldComponentUpdate();
import React from "react";

function Child({seconds}){
    console.log('I am rendering');
    return (
        <div>I am update every {seconds} seconds</div>
    )
};

function areEqual(prevProps, nextProps) {
    if(prevProps.seconds===nextProps.seconds){
        return true
    }else {
        return false
    }

}
export default React.memo(Child,areEqual)
Copy the code

  • Suspense and react. lazy implement code splitting and loading on demand.

  • Stateless component

    Stateless components belong to a function

    No inheritance function;

    There’s no life cycle,

    Its dynamic data is passed through the parent component and the child component is rendered through props,

    Use stateless components for simple logical decisions and so on

  • High order component

  • Render minimizes the number of new variables and bind.

  • Note add key values to list items

Refer to the article

Front-end performance optimization based on React.Suspense and React.lazy

How to use react.Memo ()

React Performance optimization Summary

React Memo Introduction and Use