Javascript 如何添加新元素而不使用React重新呈现整个列表

我正在开发简单的流应用程序。我有一个帖子列表，这个列表可以接收更新，更新将显示在上面

问题在于每个新的post-receive-React都会重新提交整个元素列表。我举了一个简单的例子

有没有办法避免这种行为？ 我已经在React docs上看到了动态儿童主题，但在示例中，正如您所看到的，我已经更新了所有儿童

class Post扩展了React.Component{
render（）{
log（'rerendered post'，this.props.reactKey）；
返回(
{this.props.post.text}
);
}
}
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={posts:[
{id:'00001'，text:'First one'}，
{id:'00002'，text:'Second one'}，
{id:'00003'，text:'Third one'}
]};
}
addPost（）{
const posts=this.state.posts；
unshift（{id:'00004'，text:'newpost'}）；
this.setState（{posts:posts}）；
}
render（）{
返回(
添加帖子

{this.state.posts.map（（post，index）=>{
返回（）；
})}

);
}
}
ReactDOM.render（，document.getElementById（'root'））
只需要执行一次的工作应该在保证只运行一次的生命周期方法中执行，如。正如文件建议的那样：

如果您想与其他JavaScript框架集成，使用setTimeout或setInterval设置计时器，或发送AJAX请求，请使用此方法执行这些操作

我在您的代码片段中添加了对
componentDidMount
的日志记录，以显示渲染多次发生，但每个实例只调用一次
componentDidMount


class Post扩展了React.Component{
componentDidMount（）{
console.log（'mountedpost'，this.props.id）；
}
render（）{
console.log（'rerendered post'，this.props.id）；
返回(
{this.props.post.text}
);
}
}
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.nextId=4；
此.state={
职位：[
{id:1，文本：'First one'}，
{id:2，文本：'secondone'}，
{id:3，文本：'Third one'}，
],
};
}
addPost（）{
const posts=this.state.posts；
posts.unshift（{id:this.nextId，text:'Post'+this.nextId}）；
这个.nextId++；
this.setState（{posts:posts}）；
}
render（）{
返回(
添加帖子

{this.state.posts.map（（post，index）=>{
返回（）；
})}

);
}
}
ReactDOM.render（，document.getElementById（'root'））

多次调用渲染没有什么错，React只会更新DOM中实际发生变化的内容。对每个组件调用render以确定是否有任何更改。如果您在组件中确定它甚至应该尝试调用render（我重申这一点很好），您可以使用
shouldComponentUpdate
问题是我不需要重新渲染旧帖子，因为有些函数带有API调用等。我希望它们保持原样，只添加和呈现新帖子。然后您必须使用
shouldComponentUpdate
确定是否有任何相关道具已更改谢谢。实际的问题是（因为我是新手），我没有在所有列表元素中使用唯一的键。我只使用了map函数的索引值，当然，在添加新元素到列表之后，我的所有元素都重新呈现了，因为每个元素的键值都发生了更改。