工作中难免很多的重复的业务,或者场景react hooks 无法满足的,那我们可以封装成自己的react hooks 库,学习中遇到的也可以进行一个封装,日积月累,就会多起来了嘛。
对工作中常用到业务进行hooks再次封装。
采用的是vite4,react18,react-dom18
yarn add wsk-hooks
useState
的封装。
应用场景:响应式变量(自由设置变量的值,并且可以随时获取到变量的最新值)。
const state = useReactive<any>({
count: 0,
name: 'wskang',
flag: true,
arr: [],
bugs: ['wskang', 'react', 'hook'],
addBug(bug: string) {
this.bugs.push(bug);
},
get bugsCount() {
return this.bugs.length;
},
})
setTimeout
的封装。
应用场景:一段时间后,要执行一次函数。
useTimeout(() => {
setT(n + 1)
}, 1000)
useEffect
的封装。
应用场景:类似
componentWillUnmount
功能,组件即将卸载时。
useUnmount(() => {
message.info('组件已卸载')
})
useCallback
的封装。
应用场景:组件强制更新。
const update = useUpdate();
useLatest
, useState
, useEffect
, useMemo
的封装。
应用场景:倒计时。
const [_, formattedRes] = useCountDown({
targetDate: '2022-12-31 24:00:00',
});
const { days, hours, minutes, seconds, milliseconds } = formattedRes;
useMemo
和 useRef
的封装加强版,可以替换这两个钩子。
useMemo
的值不一定是最新的值,但 useCreation
可以保证拿到的值一定是最新的值useRef
容易出现潜在的的性能隐患,但 useCreation
可以避免应用场景:需要拿到最新值、避免性能隐患时。
const nowData = useCreation(() => {}, []);
addEventListener
和 useEffect
, useRef
的封装。
应用场景:,监听各种事件。如:监听点击事件、键盘事件、滚动事件等。
useEventListener('click', () => setCount(v => v + 1), ref)
useState
和 useEventListener
的封装。
应用场景:监听 DOM 元素是否有鼠标悬停。
const h = useHover(r, {
onEnter: () => {
console.log('onEnter');
},
onLeave: () => {
console.log('onLeave');
},
})
setInterval
的封装。
应用场景:每隔一段时间,执行一次函数。
useInterval(() => {
setN(n + 1);
}, 1000)
useRef
的封装。
应用场景:随时确保获取的是最新值,并且没有闭包问题。
const fnRef = useLatest(fn)
useEffect
的封装。
应用场景:类似
componentDidMount
功能,组件渲染完成时。
useMount(() => {
message.info('首次渲染')
});
useMemo
的封装。
useMemo
(减少性能开销) 第一个参数是函数,第二个参数参数是可变的数组。
应用场景:低性能进行数字平方。
const data = usePow([1, 2, 3])
使用 wsk-hooks 项目中的react版本>=18.0.0 (没留意,自己找了好久的bug)
项目地址:GitHub