Javascript 反应：给定一个数组，高效地按相反顺序渲染元素

我当前以典型的React样式呈现列表。列表作为数组道具传递，我将其映射如下：

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

因此，当添加新元素时，似乎最新的项目已添加到列表的末尾

我希望最新的项目出现在顶部。i、 每件事都是按相反的时间顺序出现的

到目前为止，我提出的两个选择是： 1） 反转列表，每次添加内容时创建一个新数组，并将此反转列表作为道具传递。 2） 使用shift

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

我不知道Javascript支持反向映射。我一直在尝试一个for循环，但一直没有成功

---

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

在数组开头添加新元素：

array.splice(0,0,'value to add at beginning');

或者使用立即调用的函数调用

for

循环：

{(() => {
     for(...) {
         return (<i>{whatever}</i>)
     }
})()}

{（（）=>{
对于（…）{
返回（{whatever}）
}
})()}

继续按数组，渲染时，只需使用

Array.reverse()

这是

---

请注意，它将对原始方法进行变异，正如其他人指出的那样，谦逊的反向方法在很大程度上起作用。我目前也遇到了同样的问题，我必须说，至少在Chrome中使用array.reverse（）时，性能上的影响并不明显。在我看来，这比使用循环按相反顺序对列表排序要好

 array.reverse()

---

如果选择使用

reverse（）

、

shift（）

或

splice（）

反转列表，则应首先制作阵列的浅层副本，然后在副本上使用该功能。React中的道具不应该变异

例如：

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

或

（这应该是一个注释，但我还没有要点：）

当用作存储时，可以为反向数组创建一个属性，该属性将在每次原始更改时重新计算和记录

商店

从“mobx”导入{observable，computed}；
类MyStore{
@可观察项目=[1,2,3]；
@计算得到的get itemsReversed（）{
返回此.items.slice（）.reverse（）；
}
}
导出默认MyStore；

渲染

import React，{Component}来自'React'；
从“mobx react”导入{inject，observer}；
@注入（'myStore'）@observer
类列表扩展组件{
render（）{
const{myStore}=this.props；
const{itemsReversed}=myStore；
返回(
{itemsReversed.map（item=>(
{item}
))}
);
}
}
导出默认列表；

根据官方文档，这是反转阵列的首选方法：

与函数

sort

和

reverse

的内置实现不同，observableArray.sort和reverse不会改变数组的位置，只会返回已排序/已反转的副本。从MobX 5和更高版本，这将显示警告。建议改用

array.slice（）.sort（）

---

如果需要在UI中以相反顺序显示列表，也可以使用

flex-direction: row-reverse;

或

---

使用

array.reverse（）

时，每当状态发生变化时，顺序都会发生变化。我使用了

flexDirection:“column-reverse”

，它工作得很好，您也不需要处理数组数据。

这是.props.myList.reverse（）。映射选项吗？我认为使用原生reverse（）方法不是个坏主意。在Google Chrome array.reverse中，速度比其他方法快，但是，如果性能真的是一场音乐会，你可以使用这里答案中描述的方法，我想你可能想得太多了。您建议的两种方法都将在<1毫秒内运行在大型阵列上。这两种方法的性能都远远高于您正在使用的

map

。我更喜欢阵列。unshift（val）True，我不知道为什么我跳到

splice

：）在4秒钟内工作。我需要更多的时间来写这篇评论！谢谢是的，非常感谢！我的一系列图片出现了眨眼问题，你保存了我的设计！你帮了我这个密码。多谢各位

this.state.ALLProducts.reverse（）.map（（ALLProducts）=>

此方法也适用于state

React.useState（（current）=>[…current].reverse（））

如果不使用扩展运算符，它将不起作用。（“测试”对象数组）没有想到这个，而不是reverse（），flex direction工作得很好。感谢您提供了这个独特的解决方案。您是一个生命救世主，天才！反向修改数组，您可以执行array.slice（）.reverse（）来反转数组的副本

flex-direction: row-reverse;

flex-direction: column-reverse;