以前用的是ant design的Table组件，发现如果数据量大了就会很慢，于是转向了bootstrap，现在用的是mui，我个人倾向于mui

来看看mui的渲染效果图:

核心代码如下:

import React, { memo, useEffect, useState } from 'react'
import { TagWrapper } from './style'
import myAxiosInstance from '../../../utils/axios'
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import { styled } from '@mui/material/styles';
import TableCell, { tableCellClasses } from '@mui/material/TableCell';
import BreadTag from '../../../components/BreadTag';
import InfoIcon from '@mui/icons-material/Info';
import { Link } from 'react-router-dom';
import { Input,Button } from 'antd';
import Pagination from '@mui/material/Pagination';
import Stack from '@mui/material/Stack';


const StyledTableCell = styled(TableCell)(({ theme }) => ({
  [`&.${tableCellClasses.head}`]: {
    backgroundColor: theme.palette.common.black,
    color: theme.palette.common.white,
  },
  [`&.${tableCellClasses.body}`]: {
    fontSize: 14,
  },
}));


const Tag = memo(() => {
  const [tags,setTags] = useState()
  const [pgNums, setPgNums] = useState(0)
  const [seachInfo, setSeachInfo] = useState('')
  const [currentPg, setCurrentPg] = useState(1)

  const pageChange = (_,page)=>{
    console.log(page)
    setCurrentPg(page)
  }

  //render page
  useEffect(()=>{
    myAxiosInstance.get(`/tag/page?page=${currentPg}&name=${seachInfo}`,{}).then(
      res=>{
        const data = res.data
        if (data.code === 2000) {
          setTags(data.data.tags)
          setPgNums(data.data.pages)
        }
      },
      err=>{

      }
    )
  },[currentPg,seachInfo,pgNums])


  const mySearchChange = e=> {
    setSeachInfo(e.target.value)
  }
  
  return (
    <TagWrapper>
      <BreadTag/>
      <div className='searchBox'>
        <Input type='text' placeholder='请输入tag名关键字进行搜索' size='small' 
          style={{width:"300px"}}
          value = {seachInfo}
          onChange={mySearchChange}
        />
        <div className='create'>
            <Button type='link' href='/admin/tag/create' size='small'>新建</Button>
        </div>
       </div>
        <TableContainer component={Paper}>
          <Table sx={{ minWidth: 650 }} aria-label="simple table" >
            <TableHead>
              <TableRow>
                <StyledTableCell align="center"># ID</StyledTableCell>
                <StyledTableCell align="center">Name</StyledTableCell>
                <StyledTableCell align="center">Color</StyledTableCell>
                <StyledTableCell align="center">Detail</StyledTableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {
                tags?tags.map((item) => (
                  <TableRow
                    key={item.id}
                    sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
                    hover={true}
                  >
                    <TableCell component="th" scope="item" align="center">
                      {item.id}
                    </TableCell>
                    <TableCell align="center">{item.name}</TableCell>
                    <TableCell align="center" style={{background:item.color}}></TableCell>                 
                    <TableCell align="center">
                      <Link to={`/admin/tag/${item.id}`}>
                        <InfoIcon sx={{hover:"pointer"}}/>
                      </Link>
                    </TableCell>
                  
                  </TableRow>
                )):(<TableRow><TableCell colSpan={4} sx={{textAlign:'center'}}>no records found</TableCell></TableRow>)
              }
            </TableBody>
          </Table>
        </TableContainer>
        
        {tags?(<Stack spacing={2} sx={{marginTop:'30px'}} >
          <Pagination count={pgNums} 
            size='medium' 
            color="primary" 
            onChange = {pageChange}
            variant='text'
            style={{
                display: 'flex',
                justifyContent: 'center',
            }}
          />
        </Stack>):""}

    </TagWrapper>
  )
})

export default Tag