如何在WatermelonDB中排序Observable组件？旧文档方法已失效

由于sortWith方法已被移除，目前有两种主流方案实现排序，推荐优先使用数据库查询层面的排序以获得更好性能：

方案1：数据库查询阶段排序（推荐） #

直接在构建关联查询时添加排序规则，利用数据库的索引优化，适合数据量较大或固定排序规则的场景。

修改原代码中的enhance部分，在query()后链式调用sort()方法指定排序字段和方向：

const enhance = withObservables(['post'], ({ post }) => ({
  // 按likes字段降序排序，升序则用'asc'
  comments: post.comments.query().sort('likes', 'desc').observeWithColumns(['likes'])
}))

const CommentList = ({ comments }) => (
  <div>
    {/* 此时comments已经是排好序的数组，直接map即可 */}
    {comments.map(comment =>
      <EnhancedComment key={comment.id} comment={comment} />
    )}
  </div>
)

const EnhancedCommentList = enhance(CommentList)

如果需要更复杂的多字段排序，可以多次调用sort()：

// 先按likes降序，再按创建时间降序
comments: post.comments.query()
  .sort('likes', 'desc')
  .sort('createdAt', 'desc')
  .observeWithColumns(['likes', 'createdAt'])

方案2：组件内数组排序（适合动态排序场景） #

如果需要根据组件内状态动态调整排序规则（比如用户切换排序方式），可以在拿到Observable输出的数组后，使用原生Array.sort()处理：

const CommentList = ({ comments }) => (
  <div>
    {/* 展开数组避免修改原数据，按likes降序排序 */}
    {[...comments].sort((a, b) => b.likes - a.likes).map(comment =>
      <EnhancedComment key={comment.id} comment={comment} />
    )}
  </div>
)

const enhance = withObservables(['post'], ({ post }) => ({
  comments: post.comments.observeWithColumns(['likes'])
}))

const EnhancedCommentList = enhance(CommentList)

对于字符串类型字段，使用localeCompare进行排序：

// 按用户名升序排序
[...comments].sort((a, b) => a.username.localeCompare(b.username))

内容的提问来源于stack exchange，提问作者James Lee