简单聊一下virtual-list

export default function App() {
  let i=0
  const divArr=[]

  while(i<=1000){
    divArr.push(<div key={i} style={{border:'1px black solid',height:20,}}>{i}</div>)
    i++
  }

  return (
    <div style={{height:300,}}>
        {divArr}
    </div>
  );
}

export default function App() {
  const all = 1000
  //每个 item 高度
  const divHeight = 20
  //显示 item 的数量
  const divNum = 15

  const [divArr, setDivArr] = React.useState([])
  const [startNum, setStartNum] = React.useState([])

  return (
    <div style={{
      marginTop:30,
      height: 300,
      width: 300,
      overflow: 'auto',
      position: 'relative',
      border: '1px solid red',
      textAlign: 'center',
      left: '50%',
    }}
         onScroll={(e) => {
           const newStartNum = Math.ceil(e.target.scrollTop / divHeight)
           const startHeight = newStartNum * divHeight

           const endNum = newStartNum + divNum
           const endHeight = startHeight + divNum * divHeight
           const newDivArr = []

           //start 和 end 都再多渲染一条，不然往下滚动出现白色间隙不好看
           for (let i = newStartNum ; i < endNum; i++) {
             //起始位置多加一条
             if (i === newStartNum) {
               newDivArr.push(<div style={{backgroundColor: '#4a7bf7', height: divHeight, paddingRight: 20,}}
                                   key={i-1}>{i-1}</div>)
             }
             newDivArr.push(<div style={{backgroundColor: '#4a7bf7', height: divHeight, paddingRight: 20,}}
                                 key={i}>{i}</div>)
             //结束位置多加一条
             if (i === endNum) {
               newDivArr.push(<div style={{backgroundColor: '#4a7bf7', height: divHeight, paddingRight: 20,}}
                                   key={i}>{i}</div>)
             }
           }

           setDivArr(newDivArr)
           setStartNum(newStartNum)


         }}
    >
      {/*空白元素的高度，目的是让滚动条 scroll*/}
      <div style={{
        height: (startNum - 1) * divHeight,
      }}>

      </div>
      {/*实际渲染的列*/}
      <div style={{

        height: (all - startNum + 1) * divHeight,
      }}>
        {divArr}
      </div>

    </div>
  );
}

 function middleSearch(arr, start, end, value) {
    //用户输入的 value
    // let value = -1

    // let start = 0
    // let end = arr.length - 1
    let middle
    while (start <= end) {
      //中间值
      middle = Math.floor((start + end) / 2)
      //如果输入的值正好是中间值的话
      if (value === arr[middle]) {
        //终止循环
        return middle
      } else if (arr[middle] > value) {
        end = middle - 1
      } else {
        start = middle + 1
      }
    }
    if (!middle) {
      middle = -1
    }
    return middle
  }

  //=============指数搜索====================
  // Returns position of first occurrence of
  // x in array
  //arr:[2, 3, 4, 10, 20，30，40]
  //length:5
  //value:10
  function exponentialSearch(arr, length, value) {
    //先判断 data 的第一个 value 是否是要查找的 value
    //因为指数搜索要从 1 开始（ 0*2 一直是 0）
    if (arr[0] === value) {
      return 0;
    }

    //从 index=1 开始，查找范围
    let start = 1;
    let end = 1;
    //i 最终为 4
    while (end < length && arr[end] <= value) {
      start = start * 2;
      end = end * 2;
    }

    //确定查找范围是 index 2~4 后，在该范围内进行「二分」查找
    //注意：
    //(1) 由于是先 *2 再判断范围，所以当条件成立后，start 必定是多乘了 2 的
    //(2) 由于是先 *2 再判断范围，所以end 可能会超出 length
    return middleSearch(arr, start / 2, Math.min(end, length), value);

  }

  function main() {
    //data 数组（numnber 类型的递增数组）
    const arr = [2, 3, 4, 10, 40]
    //用户输入的值
    const value = 10;
    //查找的结果（返回下标）
    //指数搜索
    const result = exponentialSearch(arr, arr.length, value);

    console.log(result < 0 ? "Element is not present in array" : "Element is present at index " + result);
  }

  main()