Какой предпочтительный способ сортировки итерации в React?
Вот ситуация в псевдокоде:
{this.props.myIterable.map((iterable) => {
return ( <div>iterable.somevalue</div> )
}).sort((a,b) => {return b - a})
Другими словами, я отображаю некоторые props и добавляю что-то в dom на основе их значений, что, конечно, стандартно. Однако поворот в том, что я хочу отсортировать их определенным образом, чтобы они добавлялись в определенном порядке.
Вот вопрос:
1) Этот код работает, но мне кажется, что я нарушаю некоторые принципы React. Я или это нормально?
2) Если это не рекомендуется, каковы альтернативы? Должен ли я написать метод внутри компонента, который я использую для выполнения этой операции? Должен ли я выполнять сортировку заранее, скажем, всякий раз, когда я добавляю элемент в реквизиты? Или что-то другое?
Это все довольно теоретически, но я поискал и не смог найти никаких ресурсов по этому поводу, поэтому я был бы очень признателен, если бы выслушал некоторые мнения. Спасибо.
изменить: b - a на самом деле
return b.props.children[0].props.children[1] - a.props.children[0].props.children[1]
@Bergi, я бы предположил, что это просто заполнитель реальной логики
@Bergi отредактировал для уточнения. Я использую реквизит сравниваемых детей.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Отсортируйте по somevalue (будущие дети), а затем составьте карту.
Примечание 1: Вы должны попытаться отсортировать исходное состояние (когда вы получаете данные с сервера, устанавливаете состояние и т. д.) Перед его передачей. Сортировка в методе рендеринга будет происходить при каждом рендеринге и может вызвать проблемы с производительностью.
Заметка 2: не забудьте добавить уникальный ключ к каждому элементу.
{this.props.myIterable
.sort((a,b) => b.somevalue - a.somevalue)
.map((iterable) => (<div key = {iterable.key}>iterable.somevalue</div>))
}
И обязательно добавьте ключ в div
Спасибо за ответ. В чем функциональная разница между выполнением сортировки перед отображением?
Для начала вам не нужен a.props.children[0].props.children[1], кроме того, react работает с моделью, а модель меняет вид. Сортируйте модель, а не вид.
Да, сортировка как часть рендера разумна.
Если элементов много или ваша функция рендеринга часто вызывается, это может привести к проблемам с производительностью. В этом случае вы можете либо реализовать shouldComponentUpdate (или использовать PureComponent), либо создать новое состояние с именем sortedIterable (или что-то еще) и вычислить его в getDerivedStateFromProps. Таким образом, вам нужно вычислять сортировку только один раз за каждое изменение итерации.
Я не могу поверить, что
b - a- правильное сравнение элементов ReactDOM.