Question

以下是伪代码中的情况：

{this.props.myIterable.map((iterable) => {
    return ( <div>iterable.somevalue</div> )
}).sort((a,b) => {return b - a})

换句话说，我正在映射一些道具并根据它们的值将某些东西添加到dom中，这当然是标准的东西。然而，扭曲的是我想以特定的方式对它们进行排序，以便它们以特定的顺序附加。

以下是问题：

1）此代码有效，但感觉我违反了一些React原则。我，或者这完全没问题？

2）如果这不是推荐的做事方式，有哪些替代方案？我应该在用于执行此操作的组件中编写方法吗？我是否应该提前进行排序，比如每当我将一个项目附加到道具上时？或其他什么？

这完全是理论上的，但我四处寻找并找不到任何资源，所以我真的很感激听到一些意见。感谢。

编辑：b - a实际上是

return b.props.children[0].props.children[1] - a.props.children[0].props.children[1]

Answer 1

按somevalue（未来的孩子）排序然后映射。

注1：在传递之前，您应该尝试对原始状态进行排序（从服务器获取数据，设置状态等等）。渲染方法中的排序将在每次渲染时发生，并可能导致性能问题。

注2：不要忘记为每个元素添加唯一键。

{this.props.myIterable
  .sort((a,b) => b.somevalue - a.somevalue)
  .map((iterable) => (<div key={iterable.key}>iterable.somevalue</div>))
}

Answer 2

是的，作为渲染的一部分进行排序是合理的。

如果有很多元素，或者你的渲染函数被大量调用，这可能会导致性能问题。在这种情况下，您可以实施shouldComponentUpdate（或使用PureComponent），也可以创建一个名为sortedIterable（或其他）的新状态，并在getDerivedStateFromProps中进行计算。这样，每次迭代更改时，您只需计算一次排序。

在React中对可迭代的排序的首选方法是什么？

2 个答案: