在React中渲染动态列表

Question

我的redux存储区中有一个books数组。

我的reactjs组件像这样(books.map=>(book=>{...renderbook}))对此进行迭代以呈现书。

到目前为止很好。

现在，当将新元素添加到books时，整个列表将重新呈现。有什么办法可以避免这种情况？我相信'ListView'在React-Native中做类似的事情。在React-JS中有等效的东西吗？

Answer 1

您需要为每本书指定关键属性：

books.map(book => <Book key={book.id} />);

如果ID不变的图书不会被重新渲染。

有关更多信息，请参见：https://reactjs.org/docs/lists-and-keys.html

  

键可帮助React识别哪些项目已更改，添加或删除。应该为数组内的元素赋予键，以赋予元素稳定的身份。

此处还有更多信息：https://reactjs.org/docs/reconciliation.html#recursing-on-children