js滚动加载

import React, { memo, useRef, useState } from 'react';

const Config_ = props => {
  const [list, setList] = useState<any[]>([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);
  const { info, inputChange, curItem } = props;
  const myRef = useRef<HTMLUListElement>(null!);

  const _onScroll = data => {
    const a = myRef.current?.scrollHeight;
    const b = myRef.current?.clientHeight;
    const c = myRef.current?.scrollTop;
    console.log(a, b, c);
    if (a - b > c) {
      //未到底
      console.log('没有底部');
    } else {
      //已到底部
      console.log('到底部');
      var arr = list.concat([5, 6, 7, 8, 9, 9, 8, 7, 6]);
      setList([...arr]);
    }
  };

  return (
    <>
      <ul
        ref={myRef}
        onScroll={_onScroll}
        style={{
          height: 100,
          background: 'gray',
          overflowX: 'hidden',
          overflowY: 'auto',
        }}
      >
        {list.map((item, i) => {
          return <li key={i}>{item}</li>;
        })}
      </ul>
    </>
  );
};

export const Config = memo(Config_);