Tengo una aplicación de reacción en la que estoy usando 'reaccionar-imagen-pan-zoom-rotar' para mostrar imágenes.
https://github.com/mgorabbani/react-image-pan-zoom-rotate
Básicamente, tengo una URL de servicio externo que proporciona la imagen que estoy pasando a las dos bibliotecas a continuación para representar la imagen.
Recientemente, comencé a enfrentar un problema (solo en Chrome) en el que, si el caché está deshabilitado, cada vez que hago clic en la imagen en el navegador o uso los controles provistos por este componente, lo vuelve a generar, lo que resulta en otra llamada al servidor de imágenes externo. Y esto sucede cada vez que hago clic o interactúo con la imagen o la vista generada por la biblioteca de reacción anterior.
Ahora comencé a usar https://github.com/theanam/react-awesome-lightbox/blob/master/src/index.js y no tiene tales problemas con el caché deshabilitado.
¿Alguna idea de por qué esto podría estar sucediendo?
Puedo reproducir el comportamiento que describe: https://codesandbox.io/s/n1rv671pkj deshabilitar el caché hace que la imagen se vuelva a descargar cada vez.
Esto se debe a su implementación (que se puede ver aquí https://github.com/mgorabbani/react-image-pan-zoom-rotate/blob/master/src/PanViewer.tsx ) donde establecen key={dx}
<StyledReactPanZoom zoom={zoom} pandx={dx} pandy={dy} onPan={onPan} rotation={rotation} key={dx} > <img style={{ transform: `rotate(${rotation * 90}deg)`, }} src={image} alt={alt} ref={ref} /> </StyledReactPanZoom>Esto le indica a reaccionar que cree una instancia de un nuevo componente cada vez que cambia la coordenada x de la imagen y sin caché, lo que significa volver a descargar la imagen (intente moverse solo verticalmente y no verá ninguna recarga). Para comprender por qué la propiedad clave provoca una nueva instancia, consulte los documentos de reacción y esta respuesta en Comprensión de claves únicas para elementos secundarios de matriz en React.js
Aquí hay una idea general de la explicación de la respuesta vinculada anteriormente:
React usa la propiedad clave para comprender la relación entre el componente y el elemento DOM, que luego se usa para el proceso de reconciliación . Por lo tanto, es muy importante que la clave siempre sea única,
...
También es importante que estas teclas permanezcan estáticas durante todos los renderizados para mantener el mejor rendimiento.
Creé una caja de arena donde solo eliminé esa línea y efectivamente deja de recargar la imagen.
https://codesandbox.io/s/react-image-pan-zoom-rotate-forked-tn787?file=/src/index.tsx