country-state-city 和 react-window 加载缓慢-解网

问：

我在使用 React Select、react-window 和 country-state-city 库时遇到了性能问题。具体来说，我在使用城市选项时遇到了加载时间缓慢的问题，而状态选项加载得很好，我已经实现了 react-window 来优化性能，这对于状态选项效果很好，因为它们有大约 5000 个条目，但是城市选项包含大约 140000 个条目，导致加载和打开时间缓慢。

   <CreatableSelect
  options={citiesOptions.map((city, i) => ({
    id: i, value: city.isoCode, label: city.name
  }))}
  onChange={(value) => handleOtherCity('CityOptions', value)}
  components={{ MenuList }}
  value={otherCity}
  placeholder={<div className="text-gray-400">City</div>}
  styles={customStyle}
  isClearable
  isMulti
  className="my-react-select-container text-sm"
  classNamePrefix="my-react-select"
/>

import { FixedSizeList as List } from "react-window";


  function MenuList(props) {
    const height = 35;
    const { options, children, maxHeight, getValue } = props;
    const [value] = getValue();
    const initialOffset = options.indexOf(value) * height;
    

    return (
        <List
        height={maxHeight}
        itemCount={children.length}
        itemSize={height}
        initialScrollOffset={initialOffset}
        className="scrollbar"
      >
        {({ index, style }) => <div style={style}>{children[index]}</div>}
      </List>
    )
  }
  
  export default MenuList

reactjs 反应窗口

如果包含 140k 元素，肯定非常昂贵，我建议使用 like so，这样就不会在每次渲染时重新计算选项。另一个更好的选择是，不计算所有选项，而是使用带有搜索功能的选择，并且只显示与搜索查询匹配的选项。您可以使用库 fuze.js 实现本地搜索citiesOptionscitiesOptions.map(...)useMemo

const options = useMemo(() => citiesOptions.map((city, i) => ({     id: i, value: city.isoCode, label: city.name   })), [citiesOptions])

答： 暂无答案

上一个：react-window spacing between items 列表

下一个：react-window 与下一个 13 布局

country-state-city 和 react-window 加载缓慢

slow loading with country-state-city and react-window

评论