javascript - React : Given an array, 有效地以相反的顺序渲染元素

Question

我目前以典型的 React 风格呈现列表。该列表作为数组属性传递，我像这样映射它:

{this.props.myList.map(createListItem, this)}

因此，当添加一个新元素时，它看起来像是最新的项目被添加到列表的末尾。

我希望最新的项目出现在顶部。即一切都按时间倒序出现。

到目前为止，我想到的两个选项是:1) 反转列表，每次添加内容时创建一个新数组，并将这个反转列表作为 prop 传递。2) 使用shift。

但由于性能原因，它们都没有吸引力。

我不知道 Javascript 支持倒序映射。我一直在尝试 for 循环，但一直无法让它工作。

在 React 中以相反顺序呈现数组的惯用方法是什么？

Answer 1

如果您选择使用reverse()、shift() 或splice() 反转列表，您应该进行浅拷贝首先数组的，然后在副本上使用该函数。 React 中的 Prop 不应该被改变。

例如:

[...this.props.myList].reverse().map(createListItem, this)

或

this.props.myList.slice(0).map(createListItem, this)

(这真的应该是评论，但我还没有要点:))