助焊劑/反應設計模式

Question

我正在寫一個小的Flux / React應用，它將在畫廊中顯示圖像。 我在Flux商店中有一個計時器，該計時器每30秒從Web服務中提取一次新圖像，並將它們添加到商店中的列表中，然后發出更改，以便視圖可以渲染新照片。

我已經完成所有工作，但是現在我想弄清楚如何在添加的最新圖像中專門添加一些CSS，但是我不確定如何從視圖向下傳達信息的最佳方法是什么。沒有它的商店真的很難吃...

Answer 1

您可以僅在商店發送更新消息時跟蹤更改。

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" : ""} />
});