UI组件库及antd

什么是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 } = Layoutconst 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 : 200return 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:1000refreshOnWindowFocus: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}><inputtype="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>)
}

大多都是钩子的查文档使用方式，暂且就这样吧