上海企业网站建设价格,电子购物网站,wordpress 娱乐插件,电商运营培训课程什么是UI组件库及antd安装
随着商业化的趋势#xff0c;企业级产品中需求多且功能复杂#xff0c;且变动和并发频繁#xff0c;常常需要设计者与开发者快速做出响应#xff0c;同时这类产品中有很多类似的页面及组件#xff0c;可以通过抽象得到一些稳定且高复用性的内容…什么是UI组件库及antd安装
随着商业化的趋势企业级产品中需求多且功能复杂且变动和并发频繁常常需要设计者与开发者快速做出响应同时这类产品中有很多类似的页面及组件可以通过抽象得到一些稳定且高复用性的内容
常见的UI组件库Ant DesignMaterial UI等 组件库安装npm install antd 图标库安装npm install ant-design/icons 我的远程卡掉了
按在本地了 好的其实根本和那些没关系
我决定不再用deepseek import { Button, Space } from antd
import { PlusCircleFilled } from ant-design/iconsfunction App() {return (divhello Appbr /SpaceButton typeprimary icon{ PlusCircleFilled /} 按钮/Button/Space/div)
}export default App引入antd然后用Space把他们包起来可以更好的对齐有空格
PlusCircleFilled /是一个加号小图标
antd布局与导航组件
布局GirdLayout........
导航BreadcrumbMenu ....
看一下官网
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 (divhello AppRow gutter{[10, 10]}Col xs{12} md{8}div style{col}aaaaa/div/ColCol xs{12} md{8}div style{col}bbbbb/div/ColCol xs{12} md{8}div style{col}ccccc/div/Col/RowLayoutHeaderheader/HeaderLayoutSiderleft sidebar/SiderContentmain content/ContentSiderright sidebar/Sider/LayoutFooterfooter/Footer/Layout/div)
}export default App这是调整边距以及页面改变之后的距离 antd数据录入组件
数据录入FromSwitchRate...
。。。六月份学长说全不用看。。。
直接把项目写了得了
案例一手写antd按钮组件
功能类型尺寸文字图标。。。。
自定义hook
先了解一下什么是自定义hook
自定义hook是一个函数函数内部可以调用其他hook函数且以use开头主要作用是对逻辑功能进行封装处理达到一种复用能力
让我们试试实现一个实时获取鼠标坐标的自定义Hook
import { useEffect, useState } from reactfunction 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 (divhello App,{mouse.pageX},{mouse.pageY}/div)
}export default App
第三方Hooks库ahooksreact-use... 安装ahooks
npm i ahooks
ahooks中的
import { useMouse } from ahooksfunction App(){const mouse useMouse()return (divhello App,{mouse.pageX},{mouse.pageY}/div)
}export default App
这个clientX和clientY是针对可视区的
ahooks处理Ajax请求
useRequest是一个强大的异步数据管理的HooksReact项目中的网络请求场景使用useRequest就够了
ahooks官方nullhttps://ahooks.js.org/zh-CN/
import {useRequest} from ahooks
import axios from axiosasync 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 divloading.../div}return(divhello Appul{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 reactasync 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 divloading.../div}return(divhello Appbutton onClick{()run()}点击/buttonul{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 ahooksfunction fetchChat(title){const delay title 情感聊天室 ? 2000 : 200return new Promise((resolve,reject){setTimeout((){resolve([{id:1,text:title1},{id:2,text:title2},{id:3,text:title3},])},delay)})
}function Chat({title}){const {data,error,loading} useRequest(()fetchChat(title),{refreshDeps:[title]})if(error){return div{error.message}/div}if(loading){return divloading.../div}return (divhello Chatul{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(divhello Appbutton onClick{handleClick}关闭聊天室/buttonselect value{title} onChange{handleChange}option value情感聊天室情感聊天室/optionoption value游戏聊天室游戏聊天室/option/select{ show Chat title{title}/ }/div)
}export default App 这样修改完之后不论怎么加载都是正确的
ahooks处理请求的高级用法
useRequest的功能非常强大轮询Loading DelayReady聚焦防抖节流。。。
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 reactasync 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 divloading.../div}return (divhello Appul{data data.map((item) li key{item.id}{item.name}/li)}/ul/div)
}export default Appahooks处理业务场景
useAntdTableuseInfiniteScrolluseHistoryTravel... 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 (divhello Appbr /{list.map((item, index) {return (div key{index}inputtypetextvalue{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钩子
可以借助钩子useSetStateuseGetStateuseResetState...
useMountuseUnmount。。。
初始化和卸载的钩子 这个是管理class组件的钩子
import { useBoolean } from ahooks;function App(){const [state,{toggle,setTrue,setFalse}] useBoolean(true)return (divhello Appbr /button onClick{toggle}toggle/buttonbutton onClick{setTrue}setTrue/buttonbutton onClick{toggle}setFalse/buttonbr /{state }/div)
}export default App
这样之后可以点击按钮变成正确或者错误以及可以切换状态捏 还有一个钩子和上面的那个用法差不多
useToggle针对的值比较多 这个是加到了本地存储之中
还有比如说useDebounceuseThrottle等防抖节流等钩子
usePrevious的钩子可以用于记录上一次记录的值
防抖Debounce
概念
防抖是指在一定时间内只有最后一次触发事件才会执行相应的函数。如果在这个时间间隔内又触发了该事件则会重新计时。常用于搜索框输入联想、窗口大小改变等场景避免在用户输入过程中或窗口频繁改变时频繁触发函数。
实现原理
实现防抖的关键在于使用定时器。当事件触发时清除之前的定时器并重新设置一个新的定时器只有当定时器计时结束且期间没有再次触发事件时才执行函数。
节流Throttle
概念
节流是指在一定时间内只执行一次函数。即使在这段时间内多次触发事件也只会在规定的时间间隔内执行一次。常用于滚动加载、按钮点击等场景避免在短时间内频繁触发函数导致性能问题。
实现原理
实现节流的方法有两种时间戳版和定时器版。时间戳版是通过记录上一次执行函数的时间戳与当前时间比较判断是否达到规定的时间间隔定时器版是在定时器计时结束后执行函数期间再次触发事件不会重新计时。
useResetState是恢复初始值
ahooks处理Effect钩子
useUpdateEffectuseAsyncEffectuseDebounceEffect... import { useUpdateEffect } from ahooks
import { useState } from reactfunction App() {const [count, setCount] useState(0)useUpdateEffect(() {console.log(useUpdateEffect)})const handleClick () {setCount(count 1)}return (divhello Appbr /button onClick{handleClick}点击/button/div)
}
export default App ahooks处理DOM钩子
useFullscreenuseInViewportuseSize...
import { useEventTarget } from ahooks;export default(){const [value,{reset,onChange}] useEventTarget({initialValue:this is initial value})return (divinput value{value} onChange {onChange}style{{width:200,marginRight:20}}/br /{value}br /button typebutton onClick{reset}reset/button/div)
} 大多都是钩子的查文档使用方式暂且就这样吧
