React 5k条大数组排序时状态更新后视图未刷新问题求解

• Array.sort()为原地排序方法，直接修改原数组，不会生成新的数组引用
• React状态更新采用浅比较逻辑，当数组引用未发生变化时，会认为状态没有更新，因此不会触发组件重渲染，也不会执行监听filteredImages变化的useEffect
• 排序时你直接修改了filteredImages对应的数组值，但是因为引用没变，React没有触发更新，等到你重置排序时将引用不同的原始images数组赋值给filteredImages，触发重渲染后才读取到了之前已经被原地修改的数组值，所以出现了排序延迟生效的现象，这也是原生Array.sort实现同样无效的原因。

排序前先对原数组做浅拷贝，生成新的数组引用后再执行排序操作，修改useEffect内的排序逻辑即可：

React.useEffect(() => {
  if (sort) {
    // 先浅拷贝数组生成新引用，再执行排序
    const sortedImages = [...filteredImages].sort(
      byValue((i) => i.albumId, byNumber({ desc: sort === 'desc' }))
    );
    setFilteredImages(sortedImages);
  } else {
    // 重置时也建议做拷贝，避免引用共用带来的意外问题
    setFilteredImages([...images]);
  }
  setPage(1);
  /* eslint-disable-next-line */
}, [sort]);

如果你的filteredImages仅用于排序展示，建议排序的数据源直接用原始的images数组，避免因为其他逻辑修改filteredImages导致排序结果不符合预期。

内容的提问来源于stack exchange，提问作者r.kashigin