Antd数据加载优化

Antd的Table组件可以实现表格的展示，表格数据是动态增加的，并且表格数据的请求为异步请求。 当数据条数较大时，需保证加载速度。

页面结构：

   return (
      <>
        <Table
          columns={tableHead} 
          dataSource={dataSource} 
        />
        <Modal visible={showProcess}/> 
      </>
    );

Table为Antd中的表格，表格数据为data，最终的总数据长度为dataSource.length，dataSource.length为已知数据。Modal为显示数据加载进程的弹出框，加载进程根据数据加载条数决定，其显示状态由showProcess控制。

动态加载部分：

    const [showProcess, setShowProcess] = usestate（）
    const [dataSource, setDataSource] = usestate（)
    //异步动态加入数据
    useEffect(()=>{
    axios.get(`xx`)
        .then(res=>{
           setDataSource(res.data)
           setShowProcess(false)
           //数据加载全部完成，取消Modal框并清除interval
           clear()
        )
    ,[])
    //清除函数
    let clear=()=>{
      clearInterval(interval)
    }

数据较大时，加载缓慢，可采取前n条数据载入后更新Table的data状态，以便于页面视觉上保证数据一条条增加，而后面的数据可全部加载完再塞入Table中，避免频繁的触发渲染，影响性能。

更改后的异步请求数据的函数：

    //异步动态加入数据后
    let i = 1
    const data = []
    let interval = setInterval(() => {
          if(i<= dataSource.length)  
            //新增代码，加入判断条件
            if(i<=20){
                data.push(dataSource[i])
            }
            console.log(i)
            i++
          }else{
            setShowProcess(false)
            setDataSource(data)
            clear()
          }
    }, 0);