As we all know, componentization is the biggest feature of React, so we need to focus on component optimization.

Problem: child components that should not be rerendered are rendered after others

Let’s start with a snippet of code that contains sub-components:

import React, { Component } from 'react';
import ColorShow from "./ColorShow";
class Example extends Component {
    constructor(props){
        super(props);
        
        this.state = {
            count:0
        }
    }
    btnClick = (a)= > {
        this.setState({count:this.state.count+1})
    }
    render() { 
        return ( 
            <div>
                <h2>{`this is Immutable example , you click ${this.state.count} times`}</h2>
                <button onClick={this.btnClick}>click</button>
                <ColorShow />
            </div>); }}export default Example;
Copy the code

The code for the child component ColorShow is as follows

import React, { Component } from 'react';
class ColorShow extends Component {
    
    componentDidUpdate (){
        console.log("ColorShow componentDidUpdate");
    }
    render() { 
        return ( 
            <div >
                <h2>i am show area</h2>
            </div>); }}export default ColorShow;
Copy the code

We print something in the componentDidUpdate check in the child component ColorShow to indicate that the component is rerender. Run the following

Use PureComponent optimization

React15.3 added the Component update PureComponent. PureComponent does not require us to implement shouldComponentUpdate. It makes a shallow comparison between prop and state to determine if the component needs render. The disadvantage of shallow comparison is that when the structure of props is complex, such as multiple object nesting or deep-level object changes, the shallow comparison cannot be compared, thus preventing the re-rendering of components. So PureComponent doesn’t fully help us make the right decisions when it comes to complex data.

Use the shouldComponentUpdate function in Component.

The shouldComponentUpdate function in the component returns true or false, which determines whether the component is rerender or not. This requires a deep traversal of the data before and after, which can be costly in complex data structures. So we’re using Immutable data Immutable, and we’ve been building Immutable data mutable for three years with Facebook. Now, let’s look at the performance comparison between deep traversal and immutable data. We’re going to randomly generate the data, and we’re going to use the isEqual function in lodash to do a deep walk through the code

// Generate random data
let map = new Map(a);for (let i = 0; i < 8000; i++) {
    map.set(Math.random(), Math.random());
}
let map1 = new Map(a);for (let i = 0; i < 8000; i++) {
    map1.set(Math.random(), Math.random());
}

const _ = require("lodash");

// Use Lodash for deep traversal of map and map1
(function test () {
    console.time("isEqual");
    console.log(_.isEqual(map,map1));
    console.timeEnd("isEqual"); } ());Copy the code

The running time of the comparison program is more than 30ms.

// Generate random data
let map = new Map(a);for (let i = 0; i < 8000; i++) {
    map.set(Math.random(), Math.random());
}
let map1 = new Map(a);for (let i = 0; i < 8000; i++) {
    map1.set(Math.random(), Math.random());
}
const {is,fromJS} = require('immutable');

// Generate immutable data
const i_map = fromJS(map);
const i_map1 = fromJS(map1);

// Use the is function immutable to compare two immutable data i_map and i_map1
(function test () {
    console.time("immutable_is");
    console.log(is(i_map,i_map1));
    console.timeEnd("immutable_is"); } ());Copy the code

We first build immutable data using fromJS and compare it with the IS function. Execution, the function execution time is about 3ms.

Four,

Immutable data Immutable is an optimization for React performance, thanks entirely to the Immutable structure sharing. There are many better ways to use Immutable, such as by using it with Redux. For more details, see camsong.

React Immutable mutable mutable mutable mutable