1
我是ReactJS的新手，並開始在其中開發應用程序。ReactJS和AnguarJS的性能
該應用程序有一個包含100個圖像URL的數組，我在網頁上顯示這些圖像，每個圖像上都有一個刪除按鈕，點擊刪除數組中的圖像URL。
我能夠開發應用程序。
我的問題是每當我刪除一個圖像時，應用程序再次進行網絡調用以獲取其他圖像。例如，如果我刪除了第5張圖片，有網絡電話來獲取6到100的圖片。有沒有什麼辦法可以讓我停止進行這些網絡調用，因爲圖片已經加載。
我在AngularJS中開發了相同的應用程序，它工作得非常好，當我刪除圖像時，沒有網絡調用來獲取其他圖像。
var Image= React.createClass({
\t removeImage: function(){
\t \t this.props.removeImage(this.props.index);
\t },
\t render: function(){
\t \t var divStyle = {
\t \t \t backgroundImage: 'url(' + this.props.imageUrl + ')'
\t \t };
\t \t return(
\t \t \t <div className="imageWrapper">
<div>Image {this.props.index+1}</div>
<div className="image" style={divStyle}>
<button className="removeButton" onClick={this.removeImage} >Remove</button>
</div>
</div>
\t \t)
\t }
})
var Images= React.createClass({
\t getInitialState: function() {
\t \t console.log('Images: getInitialState');
\t return {data: imageUrls};
\t },
\t removeImage: function(index){
\t \t console.log('Images: removeImage: index: ',index);
\t \t this.state.data.splice(index,1);
\t \t this.setState({data: this.state.data});
\t \t console.log('end if removeImage method');
\t },
\t render: function(){
\t \t console.log('in Images: render method: this :', this);
\t \t var imagesNodes = this.state.data.map(function(imageUrl, index){
\t \t \t return (
\t \t \t \t <Image key={index} imageUrl={imageUrl} index={index} removeImage={this.removeImage}/>
\t \t \t)
\t \t },this);
\t \t return(
\t \t \t <div className="images">
\t \t \t \t {imagesNodes}
\t \t \t </div>
\t \t)
\t }
});
ReactDOM.render(
\t <Images />,
\t document.getElementById('imagesContainer')
)