gio-tools
v0.0.1
Published
custom-hooks reac-tools project-usually-tools
Downloads
2
Readme
gio-tools
- gio :growing at input or output
- 对项目常用到的工具方法进行提炼
- 野生前端一枚,期待您的宝贵意见
install
npm install gio-tools or yarn add gio-tools
api
useDebounce
useWillUnMount
useThrottle
useDidMount
useTimeout
useInterval
useDebounce
防抖函数,使用setTimeout 实现,并且在组件销毁时会自动清除计时器,不会产生负作用。接收一个函数,和防抖周期,返回防抖包装后的函数
- @param {fn } Function
- @param {wait} number delay time unite ms
import {useDebounce} from "gio-tools";
function App() {
const [total, setTotal] = useState(0)
const addHandle = () => {
setTotal((prev) => prev + 1)
}
const increaseHandle = useDebounce(addHandle,500)
return (
<div>
<button onClick={increaseHandle}>点击按钮</button>
<div> {total}</div>
</div>
)
}
useWillUnMount
模拟组件销毁时的生命周期钩子
- @param {fn } Function callback runing on component Destroy
import {useWillUnMount} from "gio-tools";
function App() {
useWillUnMount(()=>console.log('组件销毁- do something'))
return (
<div>
<button onClick={testHand}>点击</button>
<div> {total}</div>
</div>
)
}
useThrottle
节流函数,使用setTimeout 实现,并且在组件销毁时会自动清除计时器,不会产生负作用。接收一个函数,和节流周期,返回节流包装后的函数
- @param {fn } Function
- @param {during } number wait time unite ms
import {useThrottle} from "gio-tools";
function App() {
const [total, setTotal] = useState(0)
const addHandle = () => {
setTotal((prev) => prev + 1)
}
const increaseHandle = useThrottle(addHandle,1000)
return (
<div>
<button onClick={increaseHandle}>店家按钮</button>
<div> {total}</div>
</div>
)
}
useDidMount
模拟组件挂载时的声明周期钩子,只会执行一次
- @param {fn} Function
import {useDidMount} from "gio-tools";
function App() {
useDidMount(()=>console.log('组件挂载只会执行一次'))
return (
<div>
<div> useDidMount</div>
</div>
)
}
useTimeout
延时器 对函数进行包装,使其延时执行,组件销毁时会自动清除,避免产生负作用,函数包装时不会立即执行需要主动调用
- @param {Function} fn
- @param {number} wait delay time unite ms
import {useTimeout} from "gio-tools";
function App() {
const [total, setTotal] = useState(0)
const addHandle = () => {
setTotal((prev) => prev + 1)
}
const hand1 = useTimeout(()=>console.log('延时器 1000'),1000)
const hand2 = useTimeout(()=>console.log('延时器 800'),800)
const increaseHandle = ()=>{
hand1()
hand2()
}
return (
<div>
<button onClick={increaseHandle}>点击按钮</button>
<div> {total}</div>
</div>
)
}
useInterval
定时器对函数进行包装,使其定时调用,组件销毁时会自动清除,避免产生负作用,函数包装时不会立即执行需要主动调用
该方法使用 setTimeout 实现,因同步耗时任务大于定时器周期时,会导致定时器丢帧
- @param {Function} fn
- @param {number} wait delay time unite ms
import {useInterval} from "gio-tools";
function App() {
const [total, setTotal] = useState(0)
const addHandle = () => {
setTotal((prev) => prev + 1)
}
const hand1 = useInterval(()=>console.log('定时器 1000'),1000)
const hand2 = useInterval(()=>console.log('定时器 800'),800)
const increaseHandle = ()=>{
hand1()
hand2()
}
return (
<div>
<button onClick={increaseHandle}>点击按钮</button>
<div> {total}</div>
</div>
)
}
规划
项目分两部份 hooks 和工具函数。目前先实现了部分通用hooks.工具函数/hooks 会在后期逐步完善
- hooks (部分完成)
- 工具函数(待完善)
- 自动化测试(待完善)
- 完整的模块化打包(待完善)