read - ReactJS, llamando a setState con el mismo parámetro

setstate react

Question

He estado leyendo los documentos de React y encontré shouldComponentUpdate() . Tengo entendido que cada vez que se llama a setState() , se actualizará una nueva representación de ese componente.

Mi pregunta es que si el valor a actualizar es el MISMO que el valor del estado actual, ¿esto desencadenaría un evento de re-render? o tendría que verificar manualmente el valor actual y el valor que se actualizará en shouldComponentUpdate()

Answer 1

Añadiendo más a la respuesta de @ Jyothi con respecto a la implementación de shouldComponentUpdate() para omitir repeticiones innecesarias, en React 15.3 introdujeron un nuevo concepto PureComponent . Desde reactjs docs

La diferencia entre ellos es que React.Component no implementa shouldComponentUpdate (), pero React.PureComponent lo implementa con una proposición superficial y una comparación de estado.

Esto permite omitir llamadas innecesarias de render en componentes de clase simplemente implementando PureComponent lugar del Component habitual. Sin embargo, hay algunas advertencias con PureComponent , de los documentos sobre React.PureComponent ''s shouldComponentUpdate() :

... solo compara superficialmente los objetos Si estos contienen estructuras de datos complejas, puede producir falsos negativos para diferencias más profundas.

... omite actualizaciones de prop para todo el subárbol de componentes. Asegúrese de que todos los componentes de los niños también sean "puros".

El uso de PureComponent puede, en algunos casos, mejorar el rendimiento de su aplicación. Además, le obliga a mantener state objetos de state y objetos lo más simples posible o incluso mejor, inmutables, lo que podría ayudar a simplificar la estructura de la aplicación y hacerla más limpia.

Answer 2

La documentación oficial de React establece:

El comportamiento predeterminado es volver a renderizar en cada cambio de estado ...

https://reactjs.org/docs/react-component.html#shouldcomponentupdate

Esto significa que, de forma predeterminada, render() se ejecutará si cambia alguno de los valores de state o props de un componente.

Puede anular este comportamiento predeterminado utilizando shouldComponentUpdate() . Aquí hay un ejemplo que solo se actualiza si un valor de estado cambia.

shouldComponentUpdate(nextProps, nextState) {
    return this.state.someValue !== nextState.someValue;
}

Nota: este ejemplo ignora completamente los props . Por lo tanto, cualquier cambio en props no activará render() .

Answer 3

No sé si entendí tu pregunta correctamente, pero reaccionar solo se muestra cuando hay una diferencia entre dom virtual y dom real.

Y como Jyothi mencionó en su respuesta, el método de renderización se llamará independientemente del valor pasado en la función de establecer estado, pero la devolución dependerá de lo que devuelva este método de renderización.