React Native调整Firebase数组排序：含routes项优先显示

当然可以实现这个需求！我们只需要调整数组的排序逻辑，让带有routes字段的对象优先排在前面，剩余对象依然保持字母顺序排列。

核心排序逻辑调整 #

我们需要修改排序函数，先根据routes字段的存在性进行优先级判断，再对同优先级的对象执行原有的字母排序：

• 如果对象a存在routes，而对象b不存在，a排在b前面
• 如果对象b存在routes，而对象a不存在，b排在a前面
• 当两个对象都有routes或都没有时，按照名称的字母顺序排序

优化后的代码实现 #

建议将排序逻辑放在数据获取阶段（而非render函数中），避免每次渲染都重复执行排序操作，提升性能：

getGovermentData = () => {
  let ref = firebase.database().ref('Goverments');
  ref.on('value' , snapshot =>{
    let goverments = snapshot.val();
    // 在数据获取后直接完成排序
    goverments.sort((a, b) => {
      // 优先处理routes存在性的排序
      if (a.routes && !b.routes) return -1;
      if (!a.routes && b.routes) return 1;
      // 同优先级下按字母排序
      const nameA = a.name.toLowerCase();
      const nameB = b.name.toLowerCase();
      if (nameA < nameB) return -1;
      if (nameA > nameB) return 1;
      return 0;
    });
    this.setState({ goverments });
    console.log(goverments);
  })
}

如果你暂时希望保留在render中排序，也可以直接修改render里的sort函数：

{ this.state.goverments.sort((a, b) => {
    // 优先判断routes
    if (a.routes && !b.routes) return -1;
    if (!a.routes && b.routes) return 1;
    // 字母排序
    const nameA = a.name.toLowerCase();
    const nameB = b.name.toLowerCase();
    return nameA.localeCompare(nameB);
  }).map((item, i) => (
    // 原有渲染逻辑...
  ))
}

额外提示 #

• 尽量避免在render中执行sort这类会修改原数组的操作，因为render会在组件状态/ props变化时多次触发，重复排序会造成性能浪费
• 使用localeCompare可以更优雅地实现字母排序，替代原有的多条件判断逻辑

内容的提问来源于stack exchange，提问作者Joppe Meijers