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 组件库 ant-design.antgroup /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官方：null 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.0 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> ) }

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