当前位置：首页 > news >正文

UI组件库及antd

news 来源：原创 2025/5/18 17:26:36

什么是UI组件库及antd安装

随着商业化的趋势，企业级产品中需求多且功能复杂，且变动和并发频繁，常常需要设计者与开发者快速做出响应，同时这类产品中有很多类似的页面及组件，可以通过抽象得到一些稳定且高复用性的内容

常见的UI组件库：Ant Design，Material UI等

组件库安装：npm install antd

图标库安装：npm install @ant-design/icons

我的远程卡掉了

按在本地了

好的其实根本和那些没关系

我决定不再用deepseek

import { Button, Space } from 'antd'
import { PlusCircleFilled } from '@ant-design/icons'

function App() {
  return (
    <div>
      hello App
      <br />
      <Space>
        <Button type="primary" icon={ <PlusCircleFilled />} >按钮</Button>
      </Space>
    </div>
  )
}

export default App

引入antd，然后用Space把他们包起来可以更好的对齐，有空格

<PlusCircleFilled />是一个加号小图标

antd布局与导航组件

布局：Gird，Layout........

导航：Breadcrumb，Menu ....

看一下官网：

Ant Design - 一套企业级 UI 设计语言和 React 组件库https://ant-design.antgroup.com/index-cn

很多的分类

看看栅格：

可以通过看文档来直接使用这些代码，制作出自己想要的效果

import { Row, Col, Layout } from 'antd'
import 'antd/dist/reset.css'
const { Header, Footer, Sider, Content } = Layout

const col = {
  background: 'red',
}

function App() {
  return (
    <div>
      hello App
      <Row gutter={[10, 10]}>
        <Col xs={12} md={8}>
          <div style={col}>aaaaa</div>
        </Col>
        <Col xs={12} md={8}>
          <div style={col}>bbbbb</div>
        </Col>
        <Col xs={12} md={8}>
          <div style={col}>ccccc</div>
        </Col>
      </Row>
      <Layout>
        <Header>header</Header>
        <Layout>
          <Sider>left sidebar</Sider>
          <Content>main content</Content>
          <Sider>right sidebar</Sider>
        </Layout>
        <Footer>footer</Footer>
      </Layout>
    </div>
  )
}

export default App

这是调整边距以及页面改变之后的距离

antd数据录入组件

数据录入：From，Switch，Rate...

。。。六月份学长说全不用看。。。

直接把项目写了得了

案例一：手写antd按钮组件

功能：类型，尺寸，文字，图标。。。。

自定义hook

先了解一下什么是自定义hook

自定义hook是一个函数，函数内部可以调用其他hook函数，且以use开头，主要作用是对逻辑功能进行封装处理，达到一种复用能力

让我们试试实现一个实时获取鼠标坐标的自定义Hook

import { useEffect, useState } from "react"

function useMouse(){
    const [state,setState] = useState({
        pageX:NaN,
        pageY:NaN,
    })
    useEffect(()=>{
        function move(e){
            setState({
                pageX:e.pageX,
                pageY:e.pageY
            })
        }
        document.addEventListener("mousemove",move)
        return()=>{
            document.removeEventListener('mousemove',move)
        }
    },[])
    return state
}
function App(){
    const mouse = useMouse()
    return (
        <div>
            hello App,{mouse.pageX},{mouse.pageY}
        </div>
    )
}

export default App

第三方Hooks库：ahooks，react-use...

安装ahooks：

npm i ahooks

ahooks中的：

import { useMouse } from "ahooks"

function App(){
    const mouse = useMouse()
    return (
        <div>
            hello App,{mouse.pageX},{mouse.pageY}
        </div>
    )
}

export default App

这个clientX和clientY是针对可视区的

ahooks处理Ajax请求

useRequest是一个强大的异步数据管理的Hooks，React项目中的网络请求场景使用useRequest就够了

ahooks官方：nullhttps://ahooks.js.org/zh-CN/

import {useRequest} from 'ahooks'
import axios from 'axios'

async function getData(){
    const res = await axios.get('./cartData.json')
    return res.data.list
}

function App(){
    const {data,error,loading} = useRequest(getData)
    if(error){
        return <div>{error.message}</div>
    }
    if(loading){
        return <div>loading...</div>
    }
    return(
        <div>
            hello App
            <ul>
                {data.map((item)=> <li key={item.id}>{item.name}</li> )}
            </ul>
        </div>
    )
}

export default App

使用异步函数，获取数据，然后进行解构赋值

先加载再显示出数据

再改成点击之后加载后出数据：

import {useRequest} from 'ahooks'
import axios from 'axios'
import { useState } from 'react'

async function getData(){
    const res = await axios.get('./cartData.json')
    return res.data.list
}

function App(){
    const [data,setData] = useState([])
    const {run,error,loading} = useRequest(getData,{
        manual:true,
        onSuccess(ret){
            setData(ret)
        }
    })
    if(error){
        return <div>{error.message}</div>
    }
    if(loading){
        return <div>loading...</div>
    }
    return(
        <div>
            hello App
            <button onClick={()=>run()}>点击</button>
            <ul>
                {data.map((item)=> <li key={item.id}>{item.name}</li> )}
            </ul>
        </div>
    )
}

export default App

也可以用mutate方法去修改data

有了useRequest之后会帮我们清理上次ajax的行为

import { reject } from "lodash";
import React, { useState } from "react";
import {useRequest} from 'ahooks'

function fetchChat(title){
    const delay = title === '情感聊天室' ? 2000 : 200
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve([
                {id:1,text:title+'1'},
                {id:2,text:title+'2'},
                {id:3,text:title+'3'},
            ])
        },delay)
    })
}

function Chat({title}){
    const {data,error,loading} = useRequest(()=>fetchChat(title),{
        refreshDeps:[title]
    })
    if(error){
        return <div>{error.message}</div>
    }
    if(loading){
        return <div>loading...</div>
    }
    return (
        <div>
            hello Chat
            <ul>
                {
                    data.map((item)=> <li key={item.id}>{item.text}</li> )
                }
            </ul>
        </div>
    )
}

function App(){
    const [show,setShow] = useState(true)
    const [title,setTitle] = useState('情感聊天室')
    const handleClick =()=>{
        setShow(false)
    }
    const handleChange=(e)=>{
        setTitle(e.target.value)
    }
    return(
        <div>
            hello App
            <button onClick={handleClick}>关闭聊天室</button>
            <select value={title} onChange={handleChange}>
                <option value="情感聊天室">情感聊天室</option>
                <option value="游戏聊天室">游戏聊天室</option>
            </select>
            { show && < Chat title={title}/> }
        </div>
    )
}

export default App

这样修改完之后不论怎么加载都是正确的

ahooks处理请求的高级用法

useRequest的功能非常强大：轮询，Loading Delay，Ready，聚焦，防抖，节流。。。

refreshOnWindowFocus: true 是 ahooks 库中 useRequest 这个自定义 Hook 的一个配置项，它的主要作用是当浏览器窗口重新获得焦点时，自动重新发起数据请求以更新数据。

错误重试 - ahooks 3.0https://ahooks.js.org/zh-CN/hooks/use-request/retry主要的使用还是查文档

import { useRequest } from 'ahooks'
import axios from 'axios'
import { useState } from 'react'

async function getData() {
  const res = await axios.get('./cartData.json')
  return res.data.list.sort(() => Math.random() - 0.5)
}

function App() {
  const { data, error, loading } = useRequest(getData,{
    // pollingInterval:3000
    // loadingDelay:1000
    refreshOnWindowFocus:true,
    
  })
  if (error) {
    return <div>{error.message}</div>
  }
  if (loading) {
    return <div>loading...</div>
  }
  return (
    <div>
      hello App
      <ul>{data && data.map((item) => <li key={item.id}>{item.name}</li>)}</ul>
    </div>
  )
}

export default App

ahooks处理业务场景

useAntdTable，useInfiniteScroll，useHistoryTravel...

import React from 'react';
import { useDynamicList } from "ahooks";
import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons';

function App() {
    const { list, remove, insert, replace } = useDynamicList(['David', 'Jack']);

    return (
        <div>
            hello App
            <br />
            {
                list.map((item, index) => {
                return (
                    <div key={index}>
                        <input
                            type="text"
                            value={item}
                            onChange={(e) => replace(index, e.target.value)}
                        />
                        <MinusCircleOutlined onClick={() => remove(index)} />
                        {/* 修正为调用 insert 方法 */}
                        <PlusCircleOutlined onClick={() => insert(index + 1, '')} />
                    </div>
                );
            })}
            <br />
            <ul>
                {list.map((item, index) => <li key={index}>{item}</li>)}
            </ul>
        </div>
    );
}

export default App;

ahooks处理State钩子

可以借助钩子：useSetState，useGetState，useResetState...

useMount，useUnmount。。。

初始化和卸载的钩子

这个是管理class组件的钩子

import { useBoolean } from "ahooks";

function App(){
    const [state,{toggle,setTrue,setFalse}]= useBoolean(true)
    return (
        <div>
            hello App
            <br />
            <button onClick={toggle}>toggle</button>
            <button onClick={setTrue}>setTrue</button>
            <button onClick={toggle}>setFalse</button>
            <br />
            {state + ''}
        </div>
    )
}

export default App

这样之后可以点击按钮变成正确或者错误，以及可以切换状态捏

还有一个钩子，和上面的那个用法差不多

useToggle针对的值比较多

这个是加到了本地存储之中

还有比如说useDebounce，useThrottle等防抖节流等钩子

usePrevious的钩子可以用于记录上一次记录的值

防抖（Debounce）

概念

防抖是指在一定时间内，只有最后一次触发事件才会执行相应的函数。如果在这个时间间隔内又触发了该事件，则会重新计时。常用于搜索框输入联想、窗口大小改变等场景，避免在用户输入过程中或窗口频繁改变时频繁触发函数。

实现原理

实现防抖的关键在于使用定时器。当事件触发时，清除之前的定时器并重新设置一个新的定时器，只有当定时器计时结束且期间没有再次触发事件时，才执行函数。

节流（Throttle）

概念

节流是指在一定时间内，只执行一次函数。即使在这段时间内多次触发事件，也只会在规定的时间间隔内执行一次。常用于滚动加载、按钮点击等场景，避免在短时间内频繁触发函数导致性能问题。

实现原理

实现节流的方法有两种：时间戳版和定时器版。时间戳版是通过记录上一次执行函数的时间戳，与当前时间比较，判断是否达到规定的时间间隔；定时器版是在定时器计时结束后执行函数，期间再次触发事件不会重新计时。

useResetState是恢复初始值

ahooks处理Effect钩子

useUpdateEffect，useAsyncEffect，useDebounceEffect...

import { useUpdateEffect } from 'ahooks'
import { useState } from 'react'

function App() {
  const [count, setCount] = useState(0)
  useUpdateEffect(() => {
    console.log('useUpdateEffect')
  })
  const handleClick = () => {
    setCount(count + 1)
  }
  return (
    <div>
      hello App
      <br />
      <button onClick={handleClick}>点击</button>
    </div>
  )
}
export default App

ahooks处理DOM钩子

useFullscreen，useInViewport，useSize...

import { useEventTarget } from "ahooks";

export default()=>{
    const [value,{reset,onChange}] = useEventTarget({initialValue:'this is initial value'})
    return (
        <div>
            <input value={value}  onChange = {onChange}
            style={{width:200,marginRight:20}}/>
           <br />
           {value}
           <br />
           <button type="button" onClick={reset}>reset</button>
        </div>
    )
}