Javascript 停止重新渲染现有组件

我有一个组件，例如

我在页面上多次调用该组件，每次都是通过将src更改为随机数来更改其图像（例如，

/images/1.jpg

）。这不是问题，我的问题是，当我呈现新组件时，它会更改其随机图像，但也会重新呈现页面上已存在的该组件的所有实例，以再次更改其图像

有没有办法只更新组件的最新版本而不重新呈现现有组件

class App extends React.Component {

  state = {
    items: Array.from({ length: 5 })
  };

  fetchMoreData = () => {
      this.setState({
        items: this.state.items.concat(Array.from({ length: 5 }))
      });
  };

  render(){
    return (
      <div className="App">
        <header className="App-header">
          <p>
            Infinite Scrolling Goats
            <span className="small-text">
              (Not Infinite Scrotes, sorry)
            </span>
          </p>
          <img src={logo} className="App-logo" alt="logo" />
          </header>
          <Toggle>
          <InfiniteScroll
            dataLength={this.state.items.length}
            next={this.fetchMoreData}
            hasMore={true}
            loader={<h4>Loading...</h4>}
          >
            {this.state.items.map((i, index) => (
            <Goat />
          ))}
          </InfiniteScroll>
          </Toggle>
      </div>
    );
  }
  }

类应用程序扩展了React.Component{
状态={
items:Array.from（{length:5}）
};
fetchMoreData=（）=>{
这是我的国家({
items:this.state.items.concat（Array.from（{length:5}））
});
};
render（）{
返回(

无限滚动的山羊
（不是无限的阴囊，对不起）

{this.state.items.map（（i，索引）=>(
))}
);
}
}

是my app.js，它调用以下组件

class Goat extends Component {

    render(){

        const arNames = [
            'Napoleon',
            'Albert',
            'Phil',
            'George',
            'Graham',
            'Bertie',
            'Dexter',
            'Frankie',
            'Tommy',
            'Kyle',
            'Jacko',
            'Freddy',
            'Jezza',
            'Stepho',
          ];

        var rand = Math.floor((Math.random() * 100) + 1);
        let randomName = arNames[Math.floor(Math.random()*arNames.length)];

        return(

            <div className="GoatItem" onScroll={this.handleScroll}>
                <img className="GoatImg" src={ "/images/goats/" + rand + ".jpg" }/>
                <div className="GoatContent">
                    <p>Name: {randomName}</p>
                </div>
            </div>
        );
    }
}

类扩展组件{
render（）{
常数arNames=[
“拿破仑”，
“阿尔伯特”，
“菲尔”，
“乔治”，
“格雷厄姆”，
“伯蒂”，
“德克斯特”，
“弗兰基”，
“汤米”，
“凯尔”，
“杰科”，
“弗雷迪”，
“杰扎”，
“斯蒂芬”，
];
var rand=Math.floor（（Math.random（）*100）+1）；
让randomName=arNames[Math.floor（Math.random（）*arNames.length）]；
返回(
名称：{randomName}

);
}
}

---

参考资料：

从

Goat

组件的实现中，我可以看出它只是一个静态组件，不会因属性更改而更改。因此，您可以这样做：

class Goat extends Component {
    shouldComponentUpdate(nextProps){
        return false;
    }

    render(){

        const arNames = [
            'Napoleon',
            'Albert',
            'Phil',
            'George',
            'Graham',
            'Bertie',
            'Dexter',
            'Frankie',
            'Tommy',
            'Kyle',
            'Jacko',
            'Freddy',
            'Jezza',
            'Stepho',
          ];

        var rand = Math.floor((Math.random() * 100) + 1);
        let randomName = arNames[Math.floor(Math.random()*arNames.length)];

        return(

            <div className="GoatItem" onScroll={this.handleScroll}>
                <img className="GoatImg" src={ "/images/goats/" + rand + ".jpg" }/>
                <div className="GoatContent">
                    <p>Name: {randomName}</p>
                </div>
            </div>
        );
    }
}

类扩展组件{
应更新组件（下一步）{
返回false；
}
render（）{
常数arNames=[
“拿破仑”，
“阿尔伯特”，
“菲尔”，
“乔治”，
“格雷厄姆”，
“伯蒂”，
“德克斯特”，
“弗兰基”，
“汤米”，
“凯尔”，
“杰科”，
“弗雷迪”，
“杰扎”，
“斯蒂芬”，
];
var rand=Math.floor（（Math.random（）*100）+1）；
让randomName=arNames[Math.floor（Math.random（）*arNames.length）]；
返回(
名称：{randomName}

);
}
}

现在，如果组件稍后接受一些道具，比如说

image

，只需将

returnfalse

替换为

returnthis.props.image==nextrops.image

。这将确保组件仅在

image

prop更改时重新渲染

---

但是我建议不要进行这种优化，因为这个组件的DOM树很小。因此，即使组件重新呈现，虚拟DOM扩散也将非常快。在执行此操作之前，请使用开发工具验证性能滞后。

是的，有办法做到这一点，如果您在此处提供一些源代码，一个小代码将有助于解决您的问题，我只是认为，无论您的代码上有什么重新渲染器，都必须在新组件上调用。请在您在DE

render（）中编写的任何代码中发布一些代码

会重新呈现，无论何时状态发生变化。是的，在此之前我们可以使用生命周期方法。您能分享您的代码吗？感谢您的回复，在这个早期实例中，

shouldComponentUpdate（nextrops）{return false；}

似乎就是我所需要的全部！