Flux/React 设计模式
Flux/React design pattern
我正在编写一个小型 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" : ""} />
});
我正在编写一个小型 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" : ""} />
});