Реагируйте: Учитывая массив, эффективно визуализируйте элементы в обратном порядке.

В настоящее время я отображаю список в типичном стиле React. Список передается в виде массива prop, и я отображаю его так:

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

Поэтому, когда добавляется новый элемент, он выглядит так, как будто последний элемент был добавлен в конец списка.

Мне бы хотелось, чтобы последний элемент отображался вверху. то есть все появляется в обратном хронологическом порядке.

До сих пор я придумал два варианта: 1) Перевернуть список, создавая новый массив каждый раз, когда что-то добавляется, и передавать этот перевернутый список как реквизит. 2) Используйте сдвиг.

Но они оба непривлекательны из-за производительности.

Я не знаю, поддерживает ли Javascript отображение в обратном порядке. Я пытался за цикл, но я не смог заставить его работать.

Какой идиоматический способ визуализации массива в обратном порядке в React?

 nuway06 июн. 2016 г., 20:13
я думаю, что использование нативного метода reverse () неплохая идея. в Google Chrome array.reverse работает быстрее, чем другие методы. Но если производительность действительно согласована, вы можете использовать подходы, описанные в ответе здесь.stackoverflow.com/questions/5276953/...
 Jeremy Gordon06 июн. 2016 г., 20:10
Является ли this.props.myList.reverse (). Map опцией?
 Jake Roby06 июн. 2016 г., 20:47
Я думаю, что вы могли бы подумать об этом. Оба предложенных вами метода будут работать даже на больших массивах за <1 мс. Оба гораздо более производительны, чемmap вы уже используете.

Ответы на вопрос(4)

Добавьте новые элементы в начале массива:

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

Или позвонитеfor цикл с немедленно вызванной функцией:

{(() => {
     for(...) {
         return (<i>{whatever}</i>)
     }
})()}
 juvian06 июн. 2016 г., 20:16
Я бы предпочел array.unshift (val)
 vcanales06 июн. 2016 г., 20:18
Правда, я не знаю, почему я прыгнул наsplice :)

и при рендеринге вы можете просто использовать

Array.reverse()

здесьдокументация

Напомним, что он будет мутировать оригинал

скромный обратный метод выполняет работу по большей части. В настоящее время я столкнулся с той же проблемой, и должен сказать, что при использовании array.reverse () по крайней мере в Chrome снижение производительности не рассматривалось как таковое. На мой взгляд, это лучше, чем использовать цикл для сортировки списка в обратном порядке.

 array.reverse()

reverse(), shift() или жеsplice(), вы должны сначала сделать поверхностную копию массива, а затем использовать эту функцию в копии. Реквизит в React не должен быть видоизменен.

Например:

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

или же

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

(это действительно должен быть комментарий, но у меня пока нет смысла делать это :))

Ваш ответ на вопрос