Empêche le rechargement des fichiers GIF lorsqu'un autre composant les utilise en réaction

Question

J'ai deux composants, disons componentA et componentB. Les deux composants importent un fichier .gif, disons image.gif. image.gif ne boucle pas, donc il devrait être joué une fois seulement s'il n'est pas mis à jour.

Initialement, componentA affiche image.gif mais pas componentB. Donc le image.gif à l'intérieur componentA est joué une fois. Lorsque je rends image.gif à l'intérieur componentB, image.gif à l'intérieur du composant A est joué à nouveau, ce qui n'est pas voulu.

Cela peut-il être fait? Merci!

Edit: Certains codes simples pour reproduire:

Component A image importation comme './image.gif'

export default class componentA extends React.PureComponent { 
    render() { 
     return (
      <div> 
       <img src={image} /> 
      </div> 
     ); 
    } 
} 

Component B image import comme './image.gif'

export default class componentA extends React.PureComponent { 
    render() { 
     return (
      <div> 
       {this.props.show ? <img src={image} /> : null} 
      </div> 
     ); 
    } 
} 

App

import componentA from './componentA.react' 
import componentB from './componentB.react' 

export default class App extends React.Component { 

    componentWillMount() { 
     this.setState({ 
      show: false, 
     }); 
    } 

    componentDidMount() { 
     // ...or some moment when the App thinks componentB should update 
     this.setTimeout(() => { 
      this.setState({ 
       show: true, 
      }); 
     }, 4000); 
    } 

    render() { 
     return (
      <componentA /> 
      <componentB show={this.state.show} /> 
     ); 
    } 
} 

Answer 1

Je suggère d'utiliser une structure un peu plus complexe (et plus flexible): utiliser des gifs statiques et animés et les échanger avec javascript.

Comme a été suggéré dans des cas similaires:

Stop a gif animation onload, on mouseover start the activation

JavaScript to control image animation?

Answer 2

Comme this.setState exécute la méthode this.render, vos 2 composants sont nouveau rendu.

Vous pouvez essayer ce qui suit:

Composant A:

export default class componentA extends React.Component { 
    render() { 
     return (
      <div> 
       <img src={image} /> 
      </div> 
     ); 
    } 
} 

Composante B:

export default class componentB extends React.Component { 
    constructor() { 
     super(props) 
     this.state = { show: false } 
    } 

    componentDidMount() { 
     this.setTimeout(() => { 
      this.setState({ 
       show: true, 
      }); 
     }, 4000); 
    } 

    render() { 
     return (
      <div> 
       {this.state.show ? <img src={image} /> : null} 
      </div> 
     ); 
    } 
} 

App:

import componentA from './componentA.react' 
import componentB from './componentB.react' 

export default class App extends React.Component { 
    render() { 
     // Carefull here, you have to return a single `node` in the render method 
     return (
      <div> 
       <componentA /> 
       <componentB /> 
      </div> 
     ); 
    } 
}