当其他组件使用它时，防止重新加载GIF文件

问题描述：

我有两个组件，比如说componentA和componentB。这两个组件都导入一个.gif文件，比如说image.gif。 image.gif不会循环，因此只有在未更新时才应播放一次。当其他组件使用它时，防止重新加载GIF文件

最初componentA呈现image.gif而不是componentB。所以componentA里面的image.gif只播放一次。当我在componentB内呈现image.gif时，image.gif里面的componentA再次播放，这是不需要的。

可以这样做吗？谢谢！

编辑：再现一些简单的代码：

Component A 导入图像为 './image.gif'

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

Component B 导入图像为 './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} /> 
     ); 
    } 
}

你能不能，请提供一些代码所以我们可以帮助你？ componentA和B是如何组成的？ – 3Dos

添加了一些样本 – Theogry

答

我建议使用一点更复杂（和更灵活）的结构：使用静态和动画GIF并将它们与javascript交换。

像有人建议在类似案件：

Stop a gif animation onload, on mouseover start the activation

JavaScript to control image animation?

但是，如果我对不同的gif有不同的结束时间（并动态加载它们），我将不得不记录每个gif的结束时间，这对我来说甚至是不可能的。 – Theogry

答

由于this.setState运行this.render方法，你的2个组件重新呈现。

你可以尝试以下方法：

成分：

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

组分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> 
     ); 
    } 
}

应用：

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

对不起，误导您一些观点： 1. componentA和componentB实际上是在扩展React.PureComponent，所以它们不会重新渲染，除非道具已经改变（所以componentA不应该重新渲染） 2. The超时应该由网格控制，因为componentB永远不应该知道何时应该加载gif。对错误表示歉意。 – Theogry

噢好吧，我对PureComponent的知识等于null！我会看看，但！ – 3Dos

看起来像我将在[docs]（https://reactjs.org/docs/react-api.html#reactpurecomponent）中读到PureComponent时一样：如果您的React组件的render（）函数呈现在相同的道具和状态下获得相同的结果，在某些情况下，可以使用React.PureComponent来提高性能。随着您的状态发生变化，我认为它实际上会让所有的东西变得重要！这就是为什么我在ComponentB中移动状态来尝试解决您的问题！ – 3Dos

当其他组件使用它时，防止重新加载GIF文件

相关推荐