通量/反应设计模式

Flux/React design pattern

本文关键字：设计模式 通量      更新时间：2023-09-26

我正在编写一个小型Flux/React应用程序，它将在库中显示图像。我在Flux商店里有一个计时器，它每30秒从web服务中提取一张新图像，并将它们添加到商店的列表中，然后发出一个向下的更改，以便视图可以渲染新照片。

我已经完成了所有这些工作，但现在我想弄清楚如何在添加的最新图像中添加一些css，然而，我真的不确定最好的方法是什么，在不让它变得非常粗糙的情况下，将其传达到商店的视图中。。。

当商店发送更新消息时，您可以跟踪更改。

store.addChangeEventListener((images) => {
  var last = this.state.newImageUrls || {};
  var now = {};
  images.forEach(function(img){
    if(!last[img.src]) now[img.src] = true;
  });
  this.setState({newImageUrls: now, images: images});
});

在渲染中，您可以检查给定的图像src是否是新的：

var newImages = this.state.newImageUrls;
...
images.map(function(x, i){
  return <img src={x.src} className={newImages[x.src] ? "new" : ""} />
});
相关文章：