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')
)