2017-10-21 45 views
0

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.Empêche le rechargement des fichiers GIF lorsqu'un autre composant les utilise en réaction

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} /> 
     ); 
    } 
} 
+0

Pouvez-vous, s'il vous plaît, fournir un code alors on peut vous aider? Comment les composants A et B sont-ils composés? – 3Dos

+0

Ajout d'échantillons – Theogry

Répondre

0

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?

+0

Mais si j'ai différents temps de fin pour différents gifs (et que je les charge dynamiquement), je devrai enregistrer l'heure de fin de chaque gif, ce qui peut même m'être impossible. – Theogry

0

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> 
     ); 
    } 
} 
+0

Désolé pour vous induire en erreur, certains points: 1. Componenta et componentB prolonge en fait React.PureComponent, ils ne seront pas réengendrer à moins que les accessoires ont changé (si Componenta ne doit jamais réengendrer) 2. timeout devrait être contrôlé par Grid, car componentB ne devrait jamais savoir quand le gif doit être chargé. Toutes mes excuses pour les erreurs. – Theogry

+0

Oh d'accord, ma connaissance de PureComponent est égale à null! Je vais donner un coup d'oeil si! – 3Dos

+0

On dirait que ça va rendre avec PureComponent quand je lis dans le document [docs] (https://reactjs.org/docs/react-api.html#reactpurecomponent) ce qui suit: Si la fonction render() de votre composant React rend le même résultat donné les mêmes accessoires et l'état, vous pouvez utiliser React.PureComponent pour une amélioration des performances dans certains cas. En changeant d'état, je pense que tout se re-dessine! C'est pourquoi j'ai déplacé l'état dans ComponentB pour essayer de résoudre votre problème! – 3Dos