Use shouldComponentUpdate para la optimización del rendimiento

Como todos sabemos, los cambios en los apoyos y los valores de estado en react harán que los componentes se vuelvan a representar. El uso de shouldComponentUpdate es para reducir la representación innecesaria de render. Este artículo se centra en responder las siguientes preguntas:

1: Cómo usar la optimización de memoria shouldComponentUpdate;

shouldComponentUpdate(nexrProps) {
    if (this.props.num === nexrProps.num) {
        return false
    }
    return true;
}

Creo que todo el mundo sabe de esta manera, shouldComponentUpdate proporciona dos parámetros nextProps y nextState, lo que significa los siguientes apoyos y un valor de estado. Cuando la función devuelve falso, el método render () no se ejecuta y el componente no se procesará, devolviendo verdadero En este momento, el componente se vuelve a representar como de costumbre. Este método consiste en comparar el valor de los accesorios actuales con el valor de los siguientes accesorios: cuando los datos son iguales, devuelve falso, de lo contrario devuelve verdadero. Sin embargo, este método no tiene ningún efecto cuando se enfrenta a objetos complejos. Por ejemplo, si los accesorios crecen así, no hay forma de tratarlo, porque en js, object, array, function son tipos de referencia, incluso si los datos en ellos cambian, apuntan a Sigue siendo la misma dirección de memoria, por lo que el juicio anterior no funcionará.

 obj: {
    age: 12,
    name: 'xioabbao',
    student: {
        count: 1
    }
}

2: hay tres soluciones:

(1) Antes de usar setState para cambiar los datos, primero use es6 assgin para copiar, pero solo las copias profundas de la primera capa de datos, por lo que no es la solución más perfecta.

const o2 = Object.assign({},this.state.obj)
    o2.student.count = '00000';
    this.setState({
        obj: o2,
    })

(2) Use JSON.parse (JSON.stringfy ()) para una copia profunda, pero será incorrecto cuando los datos no estén definidos y funcionen

const o2 = JSON.parse(JSON.stringify(this.state.obj))
    o2.student.count = '00000';
    this.setState({
        obj: o2,
    })

(3) Use immutable.js para construir el proyecto. Immutable presta atención a la inmutabilidad de los datos. Antes de cada operación en los datos, automáticamente realizará una copia profunda de los datos. Los datos en el proyecto adoptan el método inmutable, que puede resolver fácilmente el problema, pero hay otro conjunto de API para aprender.

Este artículo es una opinión personal, espero que me puedan dar muchos consejos.